AngularJS: Search & Sort Data - Mukesh Chapagain Blog

Facebook Tweet LinkedIn Pin Print EmailShares

This article shows how you can search and sort data using AngularJS 1.x.

We will be using code from previous article example. Our code contains country & their capitals name as an array and we display them using ng-repeat directive in HTML view.

This is our example code from previous article:


<html ng-app="myApp">
    <head>
        <title>My AngularJS App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);
            
            myApp.controller('countryController', function($scope){
                $scope.countries = [
                        {name:'Nepal', capital:'Kathmandu'},
                        {name:'India', capital:'New Delhi'},
                        {name:'USA', capital:'Washington DC'},
                        {name:'UK', capital:'London'},
                        {name:'Sri Lanka', capital:'Colombo'}
                    ];
            });
        </script>       
    </head>
    <body>      
        <div ng-controller="countryController">
            <table style="border:1px solid #CCC; margin-top:10px">              
                <tr>
                    <th>Country</th>
                    <th>Capital</th>
                </tr>
                <tr ng-repeat="country in countries | orderBy:'name'">
                    <td>{{country.name}}</td>
                    <td>{{country.capital}}</td>
                </tr>
            </table>    
        </div>  
    </body>
</html>

Now, we modify the code to add search and sort feature/filter on the displayed data.

First, let’s add search feature to the example code. As you can see in the below code, we have added an input text field for search. This search input field uses ng-model directive which binds the value of the search field to a variable with the same name. We can then use the search variable as filter in the ng-repeat directive.

Here’s the full code:


<html ng-app="myApp">
    <head>
        <title>My AngularJS App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);
            
            myApp.controller('countryController', function($scope){
                $scope.countries = [
                        {name:'Nepal', capital:'Kathmandu'},
                        {name:'India', capital:'New Delhi'},
                        {name:'USA', capital:'Washington DC'},
                        {name:'UK', capital:'London'},
                        {name:'Sri Lanka', capital:'Colombo'}
                    ];
            });
        </script>       
    </head>
    <body>      
        <div>
            Search: <input ng-model="search" type="text" />
        </div>
        <div ng-controller="countryController">
            <table style="border:1px solid #CCC; margin-top:10px">              
                <tr>
                    <th>Country</th>
                    <th>Capital</th>
                </tr>
                <tr ng-repeat="country in countries | orderBy:'name' | filter:search">
                    <td>{{country.name}}</td>
                    <td>{{country.capital}}</td>
                </tr>
            </table>    
        </div>  
    </body>
</html>

Now, we add sorting feature or filter to the country-capital data. When we click on the Country or Capital title, the country or capital list is sorted alphabetically.


<html ng-app="myApp">
    <head>
        <title>My AngularJS App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);
            
            myApp.controller('countryController', function($scope){
                $scope.countries = [
                        {name:'Nepal', capital:'Kathmandu'},
                        {name:'India', capital:'New Delhi'},
                        {name:'USA', capital:'Washington DC'},
                        {name:'UK', capital:'London'},
                        {name:'Sri Lanka', capital:'Colombo'}
                    ];
            });
            
            $scope.orderByField = 'name';
            $scope.reverse = true;
        </script>       
    </head>
    <body>      
        <div>
            Search: <input ng-model="search" type="text" />
        </div>
        <div ng-controller="countryController">
            <table style="border:1px solid #CCC; margin-top:10px">              
                <tr>
                    <th><a href="#" ng-click="orderByField = 'name'; reverse = !reverse">Country</a></th>
                    <th><a href="#" ng-click="orderByField = 'capital'; reverse = !reverse">Capital</a></th>
                </tr>
                <tr ng-repeat="country in countries | orderBy:orderByField:reverse | filter:search">
                    <td>{{country.name}}</td>
                    <td>{{country.capital}}</td>
                </tr>
            </table>    
        </div>  
    </body>
</html>

In the above code, we have used two model variables $scope.orderByField and $scope.reverse. And, then while using ng-repeat directive, we use the orderByField variable to orderBy data.

We have also added href link to Country & Capital title. In the “a href” element, we have used ng-click directive. This directive changes the model variable orderByField so that when Country is clicked, the data is sorted by country and when Capital title is clicked then the data is sorted by capital name. Here, reverse variable is used to sort data in reverse order when the country or capital title is clicked second time.

Hope this helps. Thanks.

Share this:

Related posts: