pTutorial

New way to learn Programming

AngularJS filter Example

You can use filter to a directive with pipe character and filter followed by the colon ng-model name or string. Filter select from an array or JSON data.

Syntax

.....
<tr ng-repeat="x in data | filter:name">
.....
</tr>

filter Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/
angularjs/1.4.8/angular.min.js"></script>
<body>
 
<div ng-app="ukApp" ng-controller="ukController"> 
<input type = "text" ng-model = "name">
</td><table border="2">
<tr>
<th>Name</th>
   <th>City</th>
      <th>Country</th>
</tr>
  <tr ng-repeat="x in data | filter: name ">
    <td>{{ x.Name}}</td>
	    <td>{{ x.City}}</td>
		    <td>{{ x.Country}}</td>
  </tr>
</table>
</div>

<script>
var app = angular.module('ukApp', []);
app.controller('ukController', function($scope, $http) {
    $http.get("data2.php")
    .success(function(response) {$scope.data = response;});
});
</script> 

 
</body>
</html>

Explanation

In the above example filter is associate with the ng-model = "name" that's why the will be filtered according to the input field with name.

All the thing same as Controller Example except these.

AngularJS will invoke ukController with a $scope and $http object.

$http is an XMLHttpRequest (Ajax) object for requesting external server data.

$http.get() reads data in the form of JSON from http://www.ptutorial.com/angularjs/data.php.

If $http.get() method read the data successfully from the server the controller create the data property.

See Also


QUOTES OF THE DAY

To make your children capable of honesty is beginning of education.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER