Saturday, 18 March 2017

How to use filter for searching data ?


USE | filter:<search expression> FOR SEARCHING DATA


EXAMPLE
JS
var app = angular.module('module1', []);

app.controller("myController", function ($scope) {
   var employees = [ 

        { name : "Shaan", city : "Jhansi", salary : 25000 },
        { name : "Renu",  city : "Agra",   salary : 47000 },
        { name : "Rahul", city : "Delhi",  salary : 35000 },
        { name : "Anju",  city : "Noida",  salary : 18000 } 

     ]
 
   $scope.employees = employees;

});


HTML
<body ng-app="module1">
<div ng-controller="myController"> 
  Search : <input type="text" placeholder="Search employee"
                 
ng-model="searchText" />
  <br/>
<br/> 

  <table>
     <thead>
        <tr> <th>Name</th> <th>City</th> <th>Salary</th> </tr>
     </thead>
     <tbody>
        <tr ng-repeat="employee in employees |filter:searchText">
           <td> {{ employee.name }} </td>
           <td> {{ employee.city }} </td>
           <td> {{ employee.salary }} </td>
        </tr>
     </tbody>
  </table> 
</div>



 

It will search the value entered (in search text) in all the employee data / all columns.
employee in employees |filter:searchText

To make search in specific column, use field name with filter expression, Like :
employee in employees |filter:searchText.city

No comments:

Post a Comment

Note: only a member of this blog may post a comment.