AngularJs Filter

AngularJs filters are concepts that work with separation of record based on column and in angular filters, we added expressions and directives by using the pipe (|) character. 

These filters are used to display the array items are filtered by the help of user input filter key text.

In the below example, I am going to display the array items in UX using the filter expression. 
//The Filter syntax:

<div ng-repeat="user in users | filter:username "></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
            }];
        });

//HTML code sample as given below.

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div class="form-inline">
            <input ng-model="username" type="text" placeholder="Flter key">
        </div>
        <ul ng-repeat="user in users | filter:username ">
            <li>{{user.name}}</li>
        </ul>
    </div>
</div>

//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 class="form-inline">
            <input ng-model="username" type="text" placeholder="Flter key">
        </div>
        <ul ng-repeat="user in users | filter:username ">
            <li>{{user.name}}</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