Filters

<DOCTYPE html>
    <html>
        <head>
            <meta CHARSET="UTF-8">
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        </head>
        <body ng-app="myApp" ng-controller="myCtrl">
            <h2>Filters (uppercase, lowercase, currency, filter, Custom filter)</h2>
            <fieldset>
                <legend>
                    Uppercase
                </legend>
                <div ng-init='name = {"first_name":"Shailesh"}'>
                    {{name.first_name| uppercase}}
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    Lowercase
                </legend>
                <div ng-init='month = {"first":"january"}'>
                    {{month.first| lowercase}}
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    Currency
                </legend>
                <div ng-init='currency = {"inr": 20000, "usd":30000, "euro": 25000}'>
                    <!-- {{ currency_expression | currency : symbol : fractionSize}} -->
                    {{currency.inr| currency : ' &#8377;' : 3}} <br/>
                    {{currency.usd| currency}} <br/>
                    {{currency.euro| currency : '&euro;'}}
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    Single Filter
                </legend>
                <div ng-init='city = ["Mumbai", "Pune", "Nagpur"]'>
                    <table border="1">
                        <ul>
                            <li ng-repeat="x in city">
                                {{x}}
                            </li>
                        </ul>
                    </table>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    Multiple Filter
                </legend>
                <div>
                    Search by any <input type="text" name="" ng-model="search.$"/> <br/>
                    Search by Name <input type="text" name="" ng-model="search.name"/> <br/>
                    Search Country <input type="text" name="" ng-model="search.country"/> <br/>
                    <table border="1">
                        <tr ng-repeat="x in emp_records| filter:search">
                            <td>{{x.name}}</td>
                            <td>{{x.country}}</td>
                            <td>{{x.age}}</td>
                        </tr>
                    </table>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    Multiple Filter Skip Few
                </legend>
                <div>
                    Search by Name or Country Only <input type="text" name="" ng-model="query"/> <br/>
                    <table border="1">
                        <tr ng-repeat="x in emp_records| filter:search2">
                            <td>{{x.name}}</td>
                            <td>{{x.country}}</td>
                            <td>{{x.age}}</td>
                        </tr>
                    </table>
                </div>
            </fieldset>
        </body>
        <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function ($scope) {
                $scope.emp_records = [
                    {name: 'Jani', country: 'Norway', 'age': 20},
                    {name: 'Carl', country: 'Sweden', 'age': 21},
                    {name: 'Margareth', country: 'England', 'age': 22},
                    {name: 'Hege', country: 'Norway', 'age': 23},
                    {name: 'Joe', country: 'Denmark', 'age': 24},
                    {name: 'Gustav', country: 'Sweden', 'age': 25},
                    {name: 'Birgit', country: 'Denmark', 'age': 26},
                    {name: 'Mary', country: 'England', 'age': 27},
                    {name: 'Kai', country: 'Norway', 'age': 28}
                ];

                $scope.search2 = function (row) {
                    return (angular.lowercase(row.name).indexOf(angular.lowercase($scope.query) || '') !== -1 ||
                            angular.lowercase(row.country).indexOf(angular.lowercase($scope.query) || '') !== -1);
                };
            });

        </script>
    </html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *