Suggested VideosPart 8 - AngularJS filtersPart 9 - Sorting data in AngularJSPart 10 - AngularJS sort rows by table headerIn this video we will discuss, how to implement search in Angular using search filter. As we type in the search textbox, all the columns in the table must be searched and only the matching rows should be displayed. Script.js : .controller("myController", function($scope) {
{ 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 :<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="Scripts/angular.min.js"></script> <script src="Scripts/Script.js"></script> <link href="Styles.css" rel="stylesheet" /> <div ng-controller="myController"> Search : <input type="text" placehol der="Search employees" <tr ng-repeat="employee in employees | filter:searchText"> <td> {{ employee.name }}</td> <td> {{ employee.gender }}</td&g t; <td> {{ employee.salary }} </td> <td> {{ employee.city }} </td> &n bsp; </tr></body>
Styles.css :
border-collapse: collapse;
< div style="margin-bottom:.0001pt;"> padding: 5px; text-align: left;
At the moment, the search is being done across all columns. I f you want to search only one specific column, then change ng-model directive value on the search textbox as shown below. With this change only city column is searched.<input type="text" ng-model="searchText.city" placeholder="Search employees" /> |
No comments:
Post a Comment