Read more

Angular: Binding strength in ngRepeat (aka operator precedence)

Dominik Schöler
January 07, 2015Software engineer at makandra GmbH

When you have an ngRepeat directive that uses track by, be sure to move the track by instructions to the very end of your statement, i.e. behind any filters.

Broken

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

Consider the following:

ng-repeat="child in category.children track by child.name | orderBy:'name'"

This will silently skip ordering; here is how AngularJS sees it (parentheses inserted to display binding strength):

ng-repeat="child in (category.children track by (child.name | orderBy:'name'))"

Working

Moving track by to the end will correctly apply filters.

ng-repeat="child in category.children | orderBy:'name' track by child.name"

For clarification, here is how AngularJS interprets our expression above:

ng-repeat="child in ((category.children | orderBy:'name') track by child.name)"

Note: Angular 1.3 introduces aliasing using as. Since I'm bound to Angular 1.2, I could not try its binding strength.

Posted by Dominik Schöler to makandra dev (2015-01-07 13:45)