На этом шаге вы добавите функцию, которая позволяет пользователям контролировать порядок, в котором отображается список телефона. Динамическая сортировка может быть реализована таким образом, добавив новое свойство модели, интегрируя ее с итератором, а затем позволяя привязке данных сделать все остальное.
Пожалуйста, сбросьте рабочий каталог:
GIT Checkout -f Шаг -4
Вы должны обнаружить, что в дополнение к поле поиска в вашем приложении есть дополнительное меню вниз, которое позволяет контролировать порядок расположения телефона.
Наиболее важные различия между шагом 3 и шагом 4 перечислены ниже. Вы можете увидеть полную разницу в GitHub.
шаблон
app/index.html
Поиск: <input ng-model = "query"> sort by: <select ng-model = "orderprop"> <vition value = "name"> алфавит </option> <vition value = "age"> новейшая </option> </select> <ul> <li ng-repeat = "Телефон в телефонах | Filter: Query | orderby: useprop"> {{Phone. <p> {{phone.snippet}} </p> </li> </ul>Мы внесли следующие изменения в index.html:
Во -первых, мы добавили тег <elect> с именем OrderProp, чтобы наши пользователи могли выбрать два метода сортировки, которые мы предоставляем.
Затем добавьте фильтр Orderby после фильтра фильтра, чтобы обработать данные, входящие в итератор. Фильтр OrderBy принимает массив в качестве ввода, копирует копию и переорчает копию и выводит ее в итератор.
AngularJS создает двустороннюю привязку между элементом Select и моделью OrderProp. Затем OrderProp будет использоваться в качестве входных данных для фильтра OrderBy.
Как мы уже говорили, когда мы обсуждали привязку данных и итераторы на шаге 3, независимо от того, когда изменяется модель данных (например, пользователь выбирает другой порядок в раскрывающемся меню), привлечение данных AngularJS автоматически обновляет представление. Нет неуклюжей операции DOM!
Контроллер
app/js/controllers.js:
Функция phonelistctrl ($ scope) {$ scope.phones = [{"name": "nexus s", "Snippet": "Fast только что стал быстрее с Nexus S.", "Age": 0}, {"name": "Motorola xoom ™ с Wi-Fi", "Snippet": "Следующее поколение. "Motorola xoom ™", «фрагмент»: «Следующее, таблетки следующего поколения», «Возраст»: 2}]; $ scope.orderprop = 'age';}Мы изменили модель телефонов - массив мобильных телефонов - добавление возрастного атрибута в каждую запись мобильного телефона. Мы будем сортировать телефоны в соответствии с возрастным атрибутом.
Мы добавили строку в код контроллера, чтобы сделать значение по умолчанию OrderProp. Если мы не установим значение по умолчанию, эта модель останется неонициализированной, пока наши пользователи не выберут заказ в раскрывающемся меню.
Теперь мы должны поговорить о двухстороннем привязке данных. Обратите внимание, что когда приложение загружается в браузер, «новейший» выбирается в раскрывающемся меню. Это потому, что мы устанавливаем OrderProp «возраст» в контроллере. Таким образом, привязка работает в направлении от нашей модели к пользовательскому интерфейсу, то есть привязке данных из модели к представлению. Теперь, когда вы выбираете «алфавитно» в раскрывающемся меню, модель данных будет обновляться одновременно, а массив списков телефона будет переупорядочен. В настоящее время связывание данных вступает в силу с другого направления, то есть связывание данных из представления к модели.
тест
Изменения, которые мы вносите, могут быть проверены с помощью модульного теста или сквозного теста. Давайте сначала посмотрим на модульные тесты:
тест/единица/Controllersspec.js:
Описать ('Phonecat Controllers', function () {descript ('phonelistctrl', function () {var scope, ctrl; ofeeach (function () {scope = {}, ctrl = new phonelistctrl (scope);}); It ('должен создавать телефоны "с 3 Dhones', function () {uspope); });Модульные тесты теперь подтверждают, что значение по умолчанию установлено правильно.
Мы используем интерфейс Жасмин для извлечения контроллера PhonelistCtrl в блок перед начальником, который будет использоваться всеми тестами во всех родительских блоках.
Запустите эти модульные тесты, как и ранее, выполните сценарий ./scripts/test.sh, и вы должны увидеть следующий вывод (Примечание: вам нужно открыть http: // localhost: 9876 в вашем браузере и введите строгий режим, прежде чем тест запустится!):
Chrome: Runner Reset ... Всего 2 теста (прошло: 2; сбой: 0; ошибки: 0) (3,00 мс) Chrome 19.0.1084.36 Mac OS: запустить 2 теста (пропущенные: 2; сбои: 0; ошибки 0) (3,00 мс)
Теперь мы обращаем наше внимание на сквозное тестирование.
тест/e2e/scenarios.js:
... это («должно быть возможно контролировать заказ телефона через раскрывающуюся поле« Выбрать », function () {// Давайте сузить набор данных, чтобы сделать тестовые утверждения более коротким вводом (« запрос »). Enter (« планшет »); ожидайте (Repeater ('. Xoom/u2122 "]); select ('orderprop'). Option ('' Alphecetite '); weal ('. '. Телефоны Li', 'Phone List'). Column ('phone.name')). Toecoal ([" Motorola xoom/u2122 "," Motorola xoom/u2122 с wi-fi ");Тестирование сквозного проверки подтверждает, что механизм сортировки окна опциона является правильным.
Теперь вы можете освежить свой браузер и снова запустить сквозное тест, или вы можете запустить его на сервере AngularJS.
упражняться
В контроллере PhonelistCtrl удалите настройку оператора OrderProp, и вы увидите, что AngularJS временно добавит пустую опцию в раскрывающемся меню, а порядок сортировки-сортировка по умолчанию (т.е. несортированный).
Добавьте привязку `{{orderprop}} к шаблону index.html, чтобы отобразить его значение в режиме реального времени.
Суммировать
Теперь вы предоставили функциональность поиска для вашего приложения и полностью протестировали его. Шаг 5 Мы узнаем об услугах AngularJS и о том, как AngularJS использует инъекцию зависимости.
Выше приведено сборник информации для двусторонней связывания AngularJS. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!