AngularJS: Introduction to filtering and order by in the Repeaters

In the previous post ‘starting with controller‘ we learnt how to create and use the controller and ng-repeat directive in the AngularJS template. In the post we will learn the filtering and order by functionality within the repeaters(using ng-repeat). In the below example user enter the search keyword(s) in the input element and see the immediately city list based on the search criteria.

Picture 1.1 shows list of cities and a textbox for the input the search creteria. When you type the ‘new’ in textbox, the list automatically filtering the records. Picture 1.3 show the search result according to b – All cities started with the ‘b’ will be filtered. This is the commonly used feature. In the below I will explain you that how can we do it with the help of AngularJS.

filtering and orderby in AngularJS

Let’s start with the JavaScript file app.js where we create a controller ‘MainCtrl’.

Controller

controller file name: app.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
 $scope.cities= [{ 'name': 'New Delhi'},
                { 'name': 'Londan'},
                { 'name': 'New York'},
                { 'name': 'Paris'},
                { 'name': 'Tokyo' },
                { 'name': 'Munic'},
                { 'name': 'Bangkok'},
                { 'name': 'Beijing'},
                { 'name': 'Shanghai'},
                { 'name': 'Los Angeles'}];
});

The controller app.js has the cities model ‘cities’ that is the array of the city names. The cities model contains a property ‘name’ that is for the name of city.

Template

The following is the template (html).

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.2.21/angular.js"></script>
    <script src="app.js"></script>
  </head>
 
  <body ng-controller="MainCtrl">
    Search City: <input ng-model="searchterm">
   <ul>
    <li ng-repeat="city in cities | filter:searchterm | orderBy:'name'">
      <span>{{city.name}}</span>
    </li>
  </ul>
  </body>
</html>

Let us consider the above html template. We are declaring the controller in the body tag. In the next line ng-model directive binds an input element to a property on the scope within controller. This is the two-way binding. Two way binding keeps input box and data model in sync.

ng-model in angularJS — Picture 1.4 : Two-way binding

Now filter can be applied to repeater directive by providing option filter as filter=model variable. This function will use input’s ng-model value to create new array that will contain filtered value based on matched ng-model value from input box. You can see in the below.

filtering in AngularJS — Picture 1.5 : Filtering and and order by in repeaters

Now we talk about the orderby. You can apply the orderby option in the repeater like as:

orderby in repeaters in Ang — Picture 1.6 : Orderby in repeaters

Orderby option will sort the ‘cities’ model on the basis of ‘name’ property. And finally angular shows the result according to give options.