built in filters in angularjs

The initial setup:

index.html

<div ng-app="myApp">
  <div ng-controller="AvengersCtrl">
    <input type="text" ng-model="search.$">
    <table>
      <tr ng-repeat="actor in avengers cast | filter:search">
        <td>{{ actor.name }}</td>
        <td>{{ actor.character }}</td>
      </tr>
    </table>
  </div>
</div>

main.js

var myApp = angular.module('myApp', []); 
 
myApp.factory('Avengers', function () {
  var Avengers = {};
  Avengers.cast = [
    {
      name: ...,
      character: ...
    },
    ...
  ];
  return Avengers;
});

orderBy

index.html

<tr ng-repeat="actor in avengers cast | orderBy:'name'">

This filter sorts the collection by the name field. -name will reverse the order.

limitTo

index.html

<tr ng-repeat="actor in avengers cast | limitTo:5">

This filter returns only the first 5 results. -5 will return only the last 5 results.

The pipe operator allows filters to be stacked and evaluated sequentially on the results of the previous collection filter.

index.html

<tr ng-repeat="actor in avengers cast | filter:search | orderBy:'name'  | limitTo: 5 ">

This filter will filter the entire collection against the search model, order the matched results by the name attribute, and limit the result set to 5 entries.

Model data can be treated as a filterable collection as well:

index.html

      <tr ng-repeat="actor in avengers cast | filter:search">
        <td>{{ actor.name | lowercase }}</td>
        <td>{{ actor.character | uppercase }}</td>
      </tr>