Angular Array Filters

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...
http://www.code-sample.com
http://www.code-sample.xyz