Filtering Data With Angularjs Filter. How To Iterate Over Objects?

This is my Filter: app.filter('ticketsFilter', function (){ return function (input){ var data = input; console.log('Filtered object:') console.log(data); return

Solution 1:

The code below will apply the filter on all objects within tickets and returning the complete array of objects:

<tr ng-repeat="ticket in tickets | filter:ticketsFilter"> 

If you want to use the filter to alter the output of a specific item, you can apply the filter one level below the ng-repeat:

<tr ng-repeat="ticket in tickets">
   {{ticket.name | filter:ticketsFilter}}
</tr>

But it depends on what you want your filter to do. I suggest you to also take look at some info how to apply filters: https://docs.angularjs.org/api/ng/filter/filter

If this does not work for you I would suggest you to be a bit more specific on what you want your filter to do.

Solution 2:

using the Ng-model and pasing the model as a filter... here an exaple: http://jsfiddle.net/leojavier/njm96Luv/2/

<div class="field" ng-app="App">
    <inputtype="text"ng-model="model"><tableng-controller="Controller"><trng-repeat="item in table | filter:model"><tdng-class="item.style"><ing-class="item.badge"></i> {{item.name}}</td></tr></table></div>

js

var App = angular.module('App', []);
App.controller('Controller', function($scope, $timeout){
    $scope.table = [
        {name : 'Dan', 
         badge: 'fa fa-futbol-o'
        },
        {name : 'Orlando', 
         badge: 'fa fa-bicycle'},
        {name : 'Dany', 
         badge: 'fa fa-bolt'}
   ];

    $scope.delete = function(item, index){
        item.deleted = true;
        item.style = 'deleted';

        functiondestroy() {
        $scope.table.splice(index, 1)
        }

        $timeout(function(){destroy();}, 3000);
    }
})

exaple: http://jsfiddle.net/leojavier/njm96Luv/2/

Solution 3:

below div will display the ticket as per my textbox input

 <inputtype="text" ng-model="tickets.Id">
<div ng-repeat="ticket in tickets | filter:tickets">

Solution 4:

I think what you're trying to do is nest the ng-repeats. Correct me if I'm wrong, but if I'm right you can do something like this:

<divng-repeat="ticket in tickets"><divng-repeat="myOtherObject in   ticket.someProperty | filter:something"></div></div>

Sorry for the sloppy code, on mobile, but you should get the idea.

Solution 5:

All of you gave me great insight about this problem. I thank you every and each of you. Since none had a full answer, I'm going to summarize all the tips and create a full answer to this problem:

First of all. When I'm trying to iterate over

<tr ng-repeat="ticket in tickets | ticketsFilter">

the ticketsFilter will receive a instance of ticketS. TicketS is an Object containing multiple ticket Objects, and each ticket having some properties. So:

$scope.tickets = {
  ticket: { name: 'Philip', status: 'good' },
  ticket: { name: 'R2B21', status: 'sad' },
  ticket: { name: '42', status: 'good' },
  ticket: { name: 'MVW', status: 'bad' }
};

Knowing that my filter will receive tickets as input, I could reach every ticket inside of it with a proper for loop. This way:

app.filter('ticketsFilter', function () { 
  returnfunction(tickets){
    for (var i = 0; i < tickets.length; i ++) { ...

Inside of the for loop, I will reach each and every ticket contained in tickets. So, I just need to grab them and check if they have the propertie that I want. I this case, I want to return only tickets that have a status of 'good'. So:

var ticket = tickets[i]; //Grabing the ticket inside the for loop.if (ticket.status == 'good') { //Checking if my ticket is good.

Now, I need two things. First, I need to return my data and I need to push every filtered 'good' ticket into my returned data. I need to remember, tought, that the returned object must not be 1 ticket, but ticketS. Because of that, I'm going to create a empty array called filtered before the for loop. And, to push use my if to insert ticket[i] that have a propertie of status=='good'.

So, the full code will be:

app.filter('ticketsFilter', function (){
return function (tickets){
    //creating the empty object that will return datavardata = []; 
    for (var i = 0; i < tickets.length; i ++) {
        var ticket = tickets[i];
        if (ticket.status == 'good'){
            //Inserting 'good' ticket inside of datadata.push(ticket);
        };
    };
    //And, finally, returning the datareturndata;
};
});

After that, If I have the Markup:

<trng-repeat="ticket in tickets | ticketsFilter"><p><b> {{ticket.name}} </b></p></tr>

It would display:

Philip

42

And that is it, iterating over an array of objects and checking their properties. I want to thank, again, every one that tried to help and want to sorry about my bad explanation.

Thank you!