The array filters are used to filter an array collection with the help of keys. The keys can be OrderBy, uppercase, lowercase, filter etc.
In this below example, I am
going to filter a user’s array collection by using the filter keys (username,
uppercase).
//The array filter syntax: <div ng-repeat="user in users | filter:username "></div> //HTML code sample as given below. <div ng-app="myApp" ng-controller="MyCtrl"> <input ng-model="username" type="text" placeholder="Flters"> <ul ng-repeat="user in users | filter:username "> <li>{{user.name | uppercase }}</li> </ul> </div> //AngularJs code sample as given below. var app = angular.module("myApp", []); app.controller("MyCtrl", function ($scope) { $scope.users = [{ name: "Anil Singh", age: 30 }, { name: "Sunil", age: 20 }, { name: "Viru Da", age: 40 }, { name: "Aradhya", age: 1 }]; }); //The full example code with live demo as given below. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Array Filters</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script> var app = angular.module("myApp", []); app.controller("MyCtrl", function ($scope) { $scope.users = [{ name: "Anil Singh", age: 30 }, { name: "Sunil", age: 20 }, { name: "Viru Da", age: 40 }, { name: "Aradhya", age: 1 }]; }); </script> </head> <body ng-app="myApp" ng-controller="MyCtrl"> <input ng-model="username" type="text" placeholder="Flters"> <ul ng-repeat="user in users | filter:username "> <li>{{user.name | uppercase }}</li> </ul> </body> </html>
The output as below,
About Blogger
|
Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
|
0 comments:
Post a Comment