Menu
I'm trying to filter some list items based on the value of a boolean property, but no matter what I do the entire list is always displayed. A few of the the things I've tried have been so broken that nothing displays, but that's neither here nor there. I can't get my filtering working as desired:
$scope.attendees = [ {"firstname":"Steve", "lastname":"Jobs", "arrived":true, "id":1} ,{"firstname":"Michelle", "lastname":"Jobs", "arrived":false, "id":2} ,{"firstname":"Adam", "lastname":"Smith", "arrived":true, "id":3} ,{"firstname":"Megan", "lastname":"Smith", "arrived":false, "id":4} ,{"firstname":"Dylan", "lastname":"Smith", "arrived":false, "id":5} ,{"firstname":"Ethan", "lastname":"Smith", "arrived":false, "id":6} ]; Using the following ng-repeat filtering:
<ul> <li ng-repeat="person in attendees track by person.id | filter:arrived:'false'"> {{person.lastname}}, {{person.firstname}} </li> </ul> I feel like I've tried every permutation that I can find referenced, most of which came from various StackOverflow search results:
filter:'arrived'filter:arrivedfilter:'person.arrived'filter:person.arrivedfilter:{arrived:true}filter:{arrived:'true'}filter:{person.arrived:true}filter:{person.arrived:'true'}I've also tried creating a custom filter function:
$scope.isArrived = function(item) { return item.arrived; }; And applying it thusly:
filter:isArrivedfilter:'isArrived'filter:{isArrived(person)}filter:isArrived(person)filter:'isArrived(person)'None of these seems to work. What am I missing?
Here's a plnkr that demonstrates my problem.
347
The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat values.
When using Ng-repeat with the 'track by $index' feature, it allows you, as you may have guessed, to keep track of the indexes of the array that are being iterated over. This is extremely useful when you have an array of objects and you need to access properties within those objects.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope. So what you need to do is reach up to the parent scope, and use that $index . Save this answer.
The track by needs to be at the end of the expression:
<li ng-repeat="person in attendees | filter: {arrived: false } track by person.id"> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
