filters

Build in Filters

A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter.

In Other word you can say, a filter provides a way to format the data we display to the user. Angular gives us Several built-in filters as well as an easy way to create our own.

We invoke filters in our HTML with the | (pipe) character inside the template binding characters {{ }}.

Example 1

external.js

//defining module
var app = angular.module('IG', [])

app.controller('FirstController', ['$scope', function ($scope) {
    $scope.customers = [
        {
            name: 'David',
            street: '1234 Anywhere St.'
        },
        {
            name: 'Tina',
            street: '1800 Crest St.'
        },
        {
            name: 'Brajesh',
            street: 'Noida'
        },
        {
            name: 'Michelle',
            street: '890 Main St.'
        }
    ];
} ])

Index.html

<!DOCTYPE html>
<html ng-app="IG">
<head lang="en">
    <meta charset="UTF-8">
    <title<Filter in AngularJS>/title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
    </script>
    <script src="Scripts/external.js"></script>
</head>
<body>

<div ng-controller="FirstController">
    <input type="text" ng-model="SearchData" />
   <ul>
        <li ng-repeat="Cust in customers | filter:SearchData | orderBy: ‘Name’">
            {{Cust.name}} - {{Cust.street}}
        </li>
    </ul>
</div>

</body>
</html>

Example 2

external.js

//defining module
var app = angular.module('IG', [])

app.controller('SecondController', ['$scope', function ($scope) {
    $scope.friends =
            [{name:'John', phone:'555-1212', age:10},
            {name:'Mary', phone:'555-9876', age:19},
            {name:'Mike', phone:'555-4321', age:21},
            {name:'Adam', phone:'555-5678', age:35},
            {name:'Julie', phone:'555-8765', age:29}];
    $scope.predicate = '-age';
} ])

index.html

<!DOCTYPE html>
<html ng-app="IG">
<head lang="en">
    <meta charset="UTF-8">
    <title>Filter in AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
    </script>
    <script src="Scripts/external.js"></script>
</head>
<body>

<div ng-controller="SecondController">
    <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
    <hr/>
    [ <a href="" ng-click="predicate=''">unsorted</a> ]
    <table class="friend">
        <tr>
            <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
                (<a href="" ng-click="predicate = '-name'; reverse=false"<^>/a>)>/th>
            <th>>a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
            <th>>a href="" ng-click="predicate = 'age'; reverse=!reverse">Age>/a></th>
        </tr>
        <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
            <td>{{friend.name}}</td>
            <td>{{friend.phone}}</td>
            <td>{{friend.age}}</td>
        </tr>
    </table>
</div>

</body>
</html>

Example 3

external.js

//defining module
var app = angular.module('IG', [])

app.controller('FirstController', ['$scope', function ($scope) {
    $scope.customers = [
        {
            name: 'David',
            street: '1234 Anywhere St.'
        },
        {
            name: 'Tina',
            street: '1800 Crest St.'
        },
        {
            name: 'Brajesh',
            street: 'Noida'
        },
        {
            name: 'Michelle',
            street: '890 Main St.'
        }
    ];
} ])

Index.html

<!DOCTYPE html>
<html ng-app="IG">
<head lang="en">
    <meta charset="UTF-8">
    <title>Filter in AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
    </script>
    <script src="Scripts/external.js"></script>
</head>
<body>

<div ng-controller="FirstController">
    <input type="text" ng-model="SearchData" />
    <ul>
        <li ng-repeat="Cust in customers | filter:SearchData | orderBy: ‘Name’ | LimitTo:5">
            {{Cust.name}} - {{Cust.street}}
        </li>
    </ul>
</div>

</body>
</html>

Example 4

How to pass multiple parameter at same time in filter

{{PeerWorstValue | sliderchangevalue:UnitId:Decimal_Place}}


app.filter('sliderchangevalue', function () {
    return function (value, uid, DP) {
        var uuid = uid; 
        if (uuid == 2) {
            var strValue = "" + value; 
            var arr = strValue.replace("-", "").split(".")[0].split("");
            //console.log(arr);
            if (arr.length >= 12) {
                value = strValue / 1000000000000;
                return value.toFixed(DP) + "T";
            }
            else if (arr.length >= 9) {
                value = strValue / 1000000000;
                return value.toFixed(DP) + "B";
            }
            else if (arr.length >= 6) {
                value = strValue / 1000000;
                return value.toFixed(DP) + "M";
            }
            else if (arr.length >= 3) {
                value = strValue / 1000;
                return value.toFixed(DP) + "K";
            }
            else {
                return value.toFixed(DP);
            }
        }
        else
            return value.toFixed(DP);
    };
});