AngularJs Chaining Filters


The chaining filters are used to perform the multiple filter operations within the single result. This chaining filters operation will be chained using the pipe (I).

The example in detail as given below,
//The chaining filters syntax:

<div ng-repeat="user in users | filter:username | orderBy: 'age'  "></div>

//HTML code sample as given below.

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div>
            /*AngularJs Filters
            <br />1. Lowercase;
            <br />2. Uppercase;
            <br />3. OrderBy ;
            <br />4. Currency ;
            <br />5. Filter ; */
        </div>
        <div>
            <br />
        </div>
        <div class="form-inline">
            <input ng-model="username" type="text" placeholder="Flter key">
        </div>
        <ul ng-repeat="user in users | filter:username | orderBy: 'age'  ">
            <li>{{user.name | uppercase }}</li>
            <li>{{user.name | lowercase }}</li>
        </ul>
    </div>
</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>
    <script src="https://code.angularjs.org/1.4.0-beta.6/angular.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">
    <div ng-controller="MyCtrl">
        <div>
            /*AngularJs Filters
            <br />1. Lowercase;
            <br />2. Uppercase;
            <br />3. OrderBy ;
            <br />4. Currency ;
            <br />5. Filter ; */
        </div>
        <div>
            <br />
        </div>
        <div class="form-inline">
            <input ng-model="username" type="text" placeholder="Flter key">
        </div>
        <ul ng-repeat="user in users | filter:username | orderBy: 'age'  ">
            <li>{{user.name | uppercase }}</li>
            <li>{{user.name | lowercase }}</li>
        </ul>
    </div>
</body>
</html>
The output as below,

About Blogger

ANIL SINGH

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

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book