A filter is used to format the value of some expression when it is displayed to the user. It can be think as selecting the elements from an array in a particular format and returns a new array.
It can be used by the following ways:
In HTML Template Binding
{{ filterExpression | filter : expression : comparator}}
In JavaScript
$filter('filter')(array, expression, comparator)
Array : It is the array of source.
Expression: Can be one of:
String:All strings in the source array that match with this string will be returned.
Object:An object can be used to filter specific properties on objects of the source array.
For example {name:"S", phone:"2"} will return an array of items which have property name "S" and property phone containing "2".
function(value, index):The function is called for each element of array. The final result is an array of those elements that is returned.
Comparator: It is used to determine if the expected value (from the filter expression) and actual value (from the object in the array) is matching or not.
It can be one of:
function(actual, expected):It will give the two values that is object value and the predicate value to compare and return true if both values are equal.
Example:
HTML:
<body ng-app="FilterApp">
<div ng-controller="FilterCtrl">
<form class="form-filter">
<input ng-model="query-filter" type="text"
placeholder="Filter by">
</form>
<ul ng-repeat="user in users | filter:query-filter | orderBy: 'name' ">
<li>{{user.name}}</li>
</ul>
</div>
</body>
JavaScript:
var app = angular.module("FilterApp", []);
app.controller("FilterCtrl", function($scope) {
$scope.users = [
{ name: "Chris", age: 22 },
{ name: "Harry", age: 52 },
{ name: "Martin", age: 21 },
{ name: "Olex", age: 34 },
{ name: "Luther", age: 26},
{ name: "Emmey", age: 33 }
];
$scope.filterFunction = function(element) {
return element.name.match(/^Ma/) ? true : false;
};
});
0 Comment(s)