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. Required fields are marked *

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.