ng-repeat list alias

In Angular, say you’ve got an ng-repeat, where you want to use the filtered list somewhere outside of the list, like:

<h3 ng-cloak>{{filteredList.length}} items in list</h3>
<ul>
  <li ng-repeat="item in list | filter:someFilter"></li>
</ul>

Note: this would not work.

Turns out Angular’s got your back. You can alias the filtered list using as. (Starting in version 1.3):

<li ng-repeat="item in list | filter:someFilter as filteredList"></li>

Then you’ve got it:

<h3 ng-cloak>{{filteredList.length}} items in list</h3>
<ul>
  <li ng-repeat="item in list | filter:someFilter as filteredList"></li>
</ul>

source & inspiration

Hey, I'm Ian. I build websites and write about what I learn as I go. Follow me on Twitter.