На этом шаге вы узнаете, как создать свой собственный фильтр дисплея.
Пожалуйста, сбросьте рабочий каталог:
GIT Checkout -f Шаг 9
Теперь перейдите на страницу мобильных данных. На предыдущем этапе страница сведений о телефонах отображает «true» или «false», чтобы указать, имеет ли телефон определенную функцию. Теперь мы используем пользовательский фильтр для графика этих текстовых строк: √ как «истинный»; и × как «ложь». Посмотрим, как выглядит код фильтра.
Наиболее важные различия между шагом 8 и шагом 9 перечислены ниже. Вы можете увидеть полную разницу в GitHub.
Пользовательские фильтры
Чтобы создать новый фильтр, сначала создайте модуль PhoneCatfilters и зарегистрируйте настраиваемый фильтр с помощью этого модуля.
app/js/filters.js
Angular.Module ('phonecatfilters', []). Filter ('checkmark', function () {return function (input) {return input? '/u2713': '/u2718';};});Наш фильтр называется Checkmark. Его вход либо истинный, либо ложь, и мы возвращаем два символа Unicode ( /U2713 и /U2718), которые представляют TRUE или FALSE.
Теперь, когда наш фильтр готов, нам нужно зарегистрировать наш модуль PhoneCatfilters в качестве зависимости от нашего основного модуля PhoneCat.
App/JS/App/JS
... Angular.Module ('phonecat', ['Phonecatfilters']) ...шаблон
Поскольку наш код шаблона записан в файле App/js/filter.js, нам нужно представить этот файл в шаблоне макета.
app/index.html
... <script src = "js/controllers.js"> </script> <script src = "js/filters.js"> </script> ...
Синтаксис для использования фильтров в шаблонах AngularJS:
{{выражение | Фильтр}}
Применяем фильтр к шаблону сведений о телефонах:
App/Partials/Phone-detail.html
... <dl> <dt> Infrared </dt> <dd> {{phone.connectivity.infrared | Checkmark}} </dd> <dt> gps </dt> <dd> {{phone.connectivity.gps | CHACKMARK}} </dd> </dl> ...тест
Фильтры, как и другие компоненты, должны быть проверены, и эти тесты на самом деле легко завершить.
тест/единица/filtersspec.js
Описать ('filter', function () {offeeach (module ('phonecatfilters')); description ('calcemark', function () {it ('должен преобразовать булевые значения в Checkmark Unicode или Cross', inject (function (checkmarkfilter) {ожидаете (checkmarkfilter (true)). tobe ('/u2713'); weard (checkmarkfilter (false). tobe ('/u2718'); });Обратите внимание, что перед выполнением каких -либо тестов фильтров вам необходимо настроить наш тестовый инжектор для модуля PhoneCatfilters.
Выполнить ./scripts/test/sh для запуска теста, и вы должны увидеть следующий вывод:
Chrome: Runner Reset ...... Всего 4 тестов (прошло: 4; сбой: 0; ошибки: 0) (3,00 мс) Chrome 19.0.1084.36 Mac OS: запустить 4 теста (пропущенное: 4; сбой: 0; ошибки 0) (3,00 мс)
Теперь давайте практиковать встроенный фильтр angularjs и добавить следующие привязки к index.html:
Мы также можем использовать поле для ввода для создания модели и объединить ее с помощью фильтрованной привязки. Добавьте следующий код в index.html:
<input ng-model = "userInput"> aversecased: {{userInput | Верхний заглав}}
Суммировать
Теперь, когда вы знаете, как писать и проверить пользовательский плагин, на шаге 10 мы узнаем, как продолжать обогащать нашу страницу сведений о мобильном телефоне с помощью AngularJS.
Выше представляет собой сборник информации о фильтре AngularJS. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за вашу поддержку на этом сайте!