Friday, 18 March 2016

Angularjs filter by multiple properties

Chandan Kumar
shared this article with you from Inoreader
Suggested Videos
Part 9 - Sorting data in AngularJS
Part 10 - AngularJS sort rows by table header
Part 11 - Search filter in AngularJS



In this video we will discuss how to filter by multiple properties in AngularJS.



In the example below, we are using multiple search textboxes. As you type in the "Search name" textbox, only the name property is searched and matching elements are displayed. Similarly, as you type in the "Search city" textbox, only the city property is searched and the matching elements are displayed. When the "exact match" checkbox is checked, an exact match search is performed.

Angularjs filter example


Script.js :
var app = angular

        .module("myModule", [])

        .co ntroller("myController", function($scope) {


< div style="margin-bottom:.0001pt;">            var employees = [

                { name: "Ben", gender: "Male", salary: 55000, city: "London" },

     ;            { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },

                { name: "Mark", gender: "Male", salary: 57000, city: "London" },

                { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },

                { name: "Todd", gender: "Male", salary: 60000, city: "London" },

            ];


            $scope.employees = employees;
        });


HtmlPage1.html :

<!DOCTYPE html>

<html xmlns="http:// www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/angular.min.js"></script>

    <script src="Scripts/Script.js"></script>

    <link href="Styles.css" rel="stylesheet" />

</head>

<body ng-app="myModule">

    <div ng-controller="myController">

        <input type="text" placeholder="Search name" ng-model="searchText.name" />

        <input type="text" placeholder="Search city" ng-model="searchText.city" />

        <input type="checkbox" ng-model="exactMatch" /> Exact Match

        <br /><br />

        <table>

            <thead>

                <tr>

                    << /span>th>Name</th>

                     <th>Gender</th>

                    <th>Salary</th>

                    <th>City</th>

                </tr>

          &nbs p; </thead>

            <tbody>

                <tr ng-repeat="employee in employees | filter: searchText : exactMatch">

                    <td> {{ employee.name }} </td>

                    <td> {{ employee.gender }} </td>

                    <td> {{ employee.salary< /span>  }} </td>

                    <td> {{ employee.city  }} </td>

                </tr>

            </tbody>

        </table>

    </div>

</body>
</html>


Styles.css

body {

    font-family: Arial;

}


table {

    border-collapse: collapse;

}


td {

    border: 1px solid black;

    padding: 5px;

}


th {

    border: 1px solid black;

    padding: 5px;

    text-align: left;
}


The following example has a single search textbox, and is used to search multiple properties - name and city.

Angularjs filter by multiple properties


Script.js :
var app = angular

        .module("myModule", [])

        .controller("myController", function($scope) {


            var employees = [

                { name: "Ben", gender: "Male", salary: 55000, city: "London" },

                { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },

                { name: "Mark", gender: "Male", salary: 57000, city: "London" },

                { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },

&nb sp;               { name: "Todd", gender: "Male", salary: 60000, city: "London" },

            ];


            $scope.employees = employees;


            $scope.search = function (item) {

                if ($scope.searchText == undefined) {

                    return true;

                }

                else {

                    if (item.city.toLowerCase()

                                 .indexOf($scope.searchText.toLowerCase()) != -1 ||

                        item.name.toLowerCase()

                                 .indexOf($scope.searchText.toLowerCase()) != -1) {

                        return true;

                    }

                }


                return false;

            };
        });


HtmlPage1.html :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    < /span><title></title>

    <script src="Scripts/angular.min.js"></script>

    <script src="Scrip ts/Script.js"></script>

    <link href="Styles.css" rel="stylesheet" />

</head>

<body ng-app="myModule">

    <div ng-controller="myController">

        Search : <input type ="text" placeholder="Search city & name"

                        ng-model="searchText" />

        <br /><br />

        <table>

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Gender</th>

                    <th>Salary</th>

                    <th>City</th>

                </tr>

            </thead>

            <tbody>

&n bsp;               <tr ng-repeat="employee in employees | filter: search">

                    <td> {{ employee.name }} </td>

                    <td> {{ employee.gender }} </td>

                    <td> {{ employee.salary  }} </td>

               & nbsp;    <td> {{ employee.city  }} </td>

                </tr>

            </tbody>

        </table>

    </div>

</body>
</html>


AngularJS tutorial for beginners
View on the web
Inoreader is a light and fast RSS Reader. Follow us on Twitter and Facebook.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)