almost 10 years ago
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
In JavaScript
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>
<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;
- };
- });
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;
};
});
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)