Фильтры используются для изменения данных. Они могут быть забиты в выражении или директивах, используя символ (|). В следующем списке показаны наиболее часто используемые фильтры.
Sr.No. | Имя и описание |
---|---|
1 |
верхний регистр преобразует текст в верхний регистр текста |
2 |
в нижнем регистре преобразует текст в нижний регистр |
3 |
валюта форматирует текст в формате валюты. |
4 |
фильтр фильтровать массив к его подмножеству на основе предоставленных критериев. |
5 |
Сортировать по упорядочивает массив на основе предоставленных критериев. |
верхний регистр
преобразует текст в верхний регистр текста
в нижнем регистре
преобразует текст в нижний регистр
валюта
форматирует текст в формате валюты.
фильтр
фильтровать массив к его подмножеству на основе предоставленных критериев.
Сортировать по
упорядочивает массив на основе предоставленных критериев.
Прописный фильтр
Добавьте верхний регистр фильтра к выражению, используя символ канала. Здесь мы добавили фильтр в верхнем регистре, чтобы напечатать имя студента заглавными буквами
Enter first name:<input type = "text" ng-model = "student.firstName"> Enter last name: <input type = "text" ng-model = "student.lastName"> Name in Upper Case: {{student.fullName() | uppercase}}
Строчный фильтр
Добавьте строчный фильтр к выражению, используя символ канала. Здесь мы добавили строчный фильтр для печати имени студента всеми строчными буквами.
Enter first name:<input type = "text" ng-model = "student.firstName"> Enter last name: <input type = "text" ng-model = "student.lastName"> Name in Lower Case: {{student.fullName() | lowercase}}
Валютный фильтр
Добавьте валютный фильтр к выражению, возвращающему число, используя символ трубы. Здесь мы добавили валютный фильтр для печати комиссий в формате валюты.
Enter fees: <input type = "text" ng-model = "student.fees"> fees: {{student.fees | currency}}
Фильтр
Для отображения только обязательных предметов мы используем subjectName в качестве фильтра.
Enter subject: <input type = "text" ng-model = "subjectName"> Subject: <ul> <li ng-repeat = "subject in student.subjects | filter: subjectName"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul>
Фильтр OrderBy
Чтобы упорядочить предметы по меткам, мы используем метки orderBy.
Subject: <ul> <li ng-repeat = "subject in student.subjects | orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul>
пример
В следующем примере показано использование всех вышеупомянутых фильтров.
testAngularJS.htm
<html> <head> <title>Angular JS Filters</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp" ng-controller = "studentController"> <table border = "0"> <tr> <td>Enter first name:</td> <td><input type = "text" ng-model = "student.firstName"></td> </tr> <tr> <td>Enter last name: </td> <td><input type = "text" ng-model = "student.lastName"></td> </tr> <tr> <td>Enter fees: </td> <td><input type = "text" ng-model = "student.fees"></td> </tr> <tr> <td>Enter subject: </td> <td><input type = "text" ng-model = "subjectName"></td> </tr> </table> <br/> <table border = "0"> <tr> <td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td> </tr> <tr> <td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td> </tr> <tr> <td>fees: </td><td>{{student.fees | currency}} </td> </tr> <tr> <td>Subject:</td> <td> <ul> <li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul> </td> </tr> </table> </div> <script> var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); </script> </body> </html>
Выход
Откройте файл testAngularJS.htm в веб-браузере. Смотрите результат.