ng-repeat.
Example
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /> <head> <title>Angular JS NG-Repeat Directive</title> <style> table { border-collapse: collapse; } table, td, th { border: 1px solid black; padding: 5px; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script> var app = angular.module("MyModule", []); app.controller("MyController", function($scope){ $scope.title = "Records"; var employees = [ { name : "Arun", country : "India" }, { name : "Hari", country : "USA" } ]; $scope.employees = employees; }); </script> </head> <body> <div ng-app="MyModule" ng-controller="MyController"> <p ng-model="name"> {{ title }} </p> <table> <thead> </thead> <tr> <th>Name</th> <th>Country</th> </tr> <tbody> <tr ng-repeat="employee in employees"> <td> {{ employee.name }} </td> <td> {{ employee.country }} </td> </tr> </tbody> </table> </div> </body> </html> |
Now we will do a filter
Search Filter
In the above example if we want to search by country we will modify the code like below
ng-model="searchTxt.country" |
will search in country fields of the employees only and the boolean value from the checkbox will look for the exact match from the checkbox.
ng-repeat="employee in employees | filter : searchTxt:exactMatch" |
Complete Example
<div ng-app="MyModule" ng-controller="MyController"> <p ng-model="name"> {{ title }} </p> Search : <input type="text" ng-model="searchTxt.country" /> <input type="checkbox" ng-model="exactMatch" /> <br /><br /> <table> <thead> </thead> <tr> <th>Name</th> <th>Country</th> </tr> <tbody> <tr ng-repeat="employee in employees | filter : searchTxt:exactMatch"> <td> {{ employee.name }} </td> <td> {{ employee.country }} </td> </tr> </tbody> </table> </div> |