В мире Angularjs фильтр предоставляет способ форматирования данных. Angular также предоставляет нам много встроенных фильтров, а также довольно просто создавать пользовательские фильтры.
В html шаблон связывание {{}}, мы используем | Чтобы вызвать фильтры. Например, мы хотим, чтобы строка отображала все капитальные символы:
{{имя | Верхний заглав}}Конечно, мы также можем использовать службу $ Filter в JavaScript для вызова фильтров и использовать строковую капитализацию в качестве примера:
app.controller ('democontroller', ['$ scope', '$ filter', function ($ scope, $ filter) {$ scope.name = $ filter ('lowercare') ('ari');}]);Как перенести параметры для фильтрации? Просто поместите параметры после фильтра и добавьте толстую кишку в середину (если необходимо пройти несколько параметров, добавьте толстую кишку после каждого параметра). Например, чисел фильтр может помочь нам ограничить количество цифр. Если вы хотите отобразить два десятичных значения, добавьте номер: 2.
{{123.456789 | номер: 2}}Фильтр фильтр в основном используется для фильтрации массива данных и возврата нового массива, содержащего данные Subarray.
Например, при поиске на стороне клиента мы можем быстро отфильтровать результаты, которые мы хотим, от массива.
Этот метод фильтра получает параметр строки, объекта или функции для выбора/удаления элементов массива.
Давайте подробно рассмотрим это:
1. Встроенный фильтр
1, верхний регистр, преобразование размера строк
{{"Нижняя кепка строка" | Верхишер}} // Результат: строка нижней крышки {{"Танк хорош" | строчный}} // Результат: бак хорош｜ Вертикальная линия здесь - это функция трубопровода. Если вы знакомы с Linux, функция трубопровода этой части в основном такая же, как 2, отформатировано JSON
{{{foo: "bar", baz: 23} | json}} // Результат: {"foo": "bar", "baz": 23}Примечание: BZA не имеет двойных цитат перед форматированием, и он преобразуется в данные JSON после форматирования.
3. Форматирование даты
mysql timestamp ng-bind = "message.time * 1000 | Дата: 'yyyy-mm-dd'"
{{1304375948024 | Дата: 'Medium'}} // 3 мая 2011 г. 06:39:08 PM {{1304375948024 | date}} // Результат: 3 мая 2011 г. {{1304375948024 | Дата: "mm/dd/yyyy @ h: mma"}} // результат: 05/03/2011 @ 6:39 {{1304375948024 | Дата: "yyyy-mm-dd HH: MM: SS"}} // Результат: 2011-05-03 06:39:084. Номер форматирование
{{1.234567 | номер: 1}} // Результат: 1.2 {{1234567 | номер}} // Результат: 1 234 5675. Форматирование валюты валюты
{{250 | валюта}} // Результат: $ 250,00 {{250 | Валюта: "rmb ￥"}} // Результат: RMB ￥ 250.006. Поиск фильтра может проверить только значение, а не ключ
{{[{"AGE": 20, "ID": 10, "name": "iPhone"}, {"AGE": 12, "ID": 11, "имя": "Sunm Xing"}, {"AGE": 44, "ID": 12, "name": "test abc"}] | Фильтр: 's'}} // Найти строки с S // Результатом вышеуказанного примера: [{"AGE": 12, "ID": 11, "name": "sunm xing"}, {"Age": 44, "id": 12, "name": "Test abc"}] {{{age ": 20,": 10, ":" {{{"Age": ":" 10, ":"} "{{{" age ":". 12, "ID": 11, "name": "sunm xing"}, {"age": 44, "id": 12, "name": "test abc"}] | Filter: {'name': 'ip'}}} // Найти строку имени, такую как IP // Результат вышеуказанного примера: [{"age": 20, "id": 10, "name": "iPhone"}] $ filter ('number') (30000, 2); var Jsonstring = $ filter ('json') ({"age": 12, "id": 11, "name": "sunm xing"}, {"age": 44, "id": 12, "name": "test abc"}])7. Limitto String, Incem Intercept
{{"Я люблю танк" | Limitto: 6}} // Результат: я люблю {{"Я люблю танк" | Limitto: -4}} // Результат: Tank {{[{"Age": 20, "ID": 10, "name": "iPhone"}, {"Age": 12, "id": 11, "name": "sunm xing"}, {"Age": 44, "id": 12, ":" test abc "}] | Limitto: 1}} // Результат: [{"AGE": 20, "ID": 10, "имя": "iPhone"}]8. Сортировка объекта заказа
{{[{"AGE": 20, "ID": 10, "name": "iPhone"}, {"AGE": 12, "ID": 11, "имя": "Sunm Xing"}, {"AGE": 44, "ID": 12, "name": "test abc"}] | orderby: 'id': true}} // root id of order {{[{"age": 20, "id": 10, "name": "iPhone"}, {"Age": 12, "id": 11, "name": "Sunm Xing"}, {"Age": 44, "id": 12, ":" test abc "}] | orderby: 'id'}} // сортирован {{[{"age": 20, "id": 10, "name": "iPhone"}, {"Age": 12, "id": 11, "name": "sunm xing"}, {"Age": 44, "id": 12, ":" test abc "}] | orderby: ['-age', 'name']}}2. Пользовательская функция фильтра
Метод настройки фильтра также очень прост. Используйте метод фильтра модуля, чтобы вернуть функцию, которая получает входное значение, и возвращает обработанный результат.
app.filter ('имя фильтра', function () {return function (объект, который необходимо отфильтровать, параметр фильтра 1, параметр фильтра 2, ...) {//...do Некоторые вещи возвращают обработанный объект;}});Я нашел базовую структуру MVC AngularJS, фонекат и пользовательский фильтр, который также написан на этой основе. Эта структура очень полезна.
Filters.js Добавить модуль
angular.module ('tanktest', []). Filter ('tankreplace', function () {return function (input) {return input.replace (/tank/, "======")};});Называется в HTML
{{"Танк хорош" | строчные стротки | tankreplace}} // Результат: ===== Это хорошоПримечание: | нижний регистр | Команды трубопровода в танках могут иметь несколько
yourapp.filter ('orderobjectby', function () {return function (элементы, поле, обратное) {var filtreed = []; angular.foreach (элементы, функция (элемент) {фильтрован фильтровано;Этот фильтр преобразует объект в стандартный массив и сортирует его по полям, которые вы указали. Вы можете использовать фильтр OrderObjectby для напоминания OrderBy, включая логическое значение после имени поля, в указанном порядке, следует ли его обратить вспять. Другими словами, подделка - это восходящий порядок, реальное снижение. html call
<li ng-repeat = "элемент в элементах | orderobjectby: 'color': true"> {{item.color}} </li>Сортировать поиск
<input type = "text" ng-model = "search" placehalder = "search"> <thead> <tr> <!-ng-class = "{Druspup: true}"-> <th ng-click = "Изменение loge ('id')" ng-class = "{disporup: order === ''}"> номер продукта <span ng-class = "{порядок: порядок: порядок: порядок: порядок: порядок: порядок: порядок: порядок: порядок: порядок: порядок: порядок: порядок: порядок: порядок. 'id'} "> </span> </th> <th ng-click =" changeorder ('name') "ng-class =" {drupup: order === ''} "> имя продукта <span ng-class =" {ordercolor: ordertype === 'name'} "> </span> </th> <th ng-click =" stry '} "> </span> </th> <th ng-click =") ". order === ''} "> цена продукта <span ng-class =" {ordercolor: ordertype === 'Price'} " <td> {{item.name}} </td> <td> {{item.price | Валюта: '￥'}} </td> </tr> </tbody>Angularjs
// Поле сортировки по умолчанию $ scope.ordortype = 'id'; $ scope.order = '-'; $ scope.changeorder = function (type) {console.log (type); $ scope.ordertype = type; if ($ scope.order === '') {$ scope.order = '-'; } else {$ scope.order = ''; }}