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

Everything flows, nothing stays still.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER