Filtering an Angular 1.2 ng-repeat with "track by" by a boolean property

AngularjsAngularjs Ng-Repeat

Angularjs Problem Overview


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:arrived
  • filter:'person.arrived'
  • filter:person.arrived
  • filter:{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:isArrived
  • filter:'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.

Angularjs Solutions


Solution 1 - Angularjs

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">

Solution 2 - Angularjs

@Gruff's answer is right, but just to give an answer from an official source:

> From the Angular ng-repeat docs: > > Note: track by must always be the last expression: > >

> {{model.name}} >

It also appear on the "Arguments" part of the docs:

> Note that the tracking expression must come last, after any filters, > and the alias expression.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAdam TuttleView Question on Stackoverflow
Solution 1 - AngularjsGruff BunnyView Answer on Stackoverflow
Solution 2 - AngularjsMistalisView Answer on Stackoverflow