ng-repeat Simple Demo in Angular JS with filter

By | September 15, 2017

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>

Leave a Reply

Your email address will not be published.