Премудрости ng repeat в Angular

angularjs

ngRepeat — рабочая лошадка в шаблонах, используемых при работе с AngularJS. Цикл имеет множество опций, работает с фильтрами и сортировкой, может подключать части шаблона при наличии каких либо условий и т.д.

Здесь мы рассмотрим некоторые варианты использования ng-repeat, типовые шаблоны, не углубляюсь особо в описание параметров, методов. Подробно цикл описан в официальном руководстве.

В начале я приведу код шаблона и скрипта целиком, чтобы было понятно и прозрачно как это работает для всех, кто только разбирается с Angular. Их можно будет скачать и в виде архива. Далее я буду приводить только кусочки кода/шаблона с изменениями.

СКАЧАТЬ АРХИВ ДЕМКИ

Вывод в цикле данных из контроллера

Это HTML файл:

JS код хранится в файле project.js. Там мы объявляем модуль projectRepDemo и описываем контроллер ngRepDemo.

В контроллере мы получаем массив данных из объявленной здесь же константы. ngRepeat выполняет работу в шаблоне по созданию списка.

Получаем в итоге:

ng-repeat-easy-use

Вывод в цикле данных без контроллера

Вообще-то контроллер нам пригодился бы для дву-направленной работы с данными, когда мы меняем что то в браузере, Angular может отслеживать связанные данные.

Т.е. для работы ngRepeat не нужен ни контроллер, ни константа объявленные в модуле.

Перебор свойств объекта в цикле ng-Repeat

При желании, можно перебирать не только элементы массива. Следующий синтаксис позволит «перебрать» свойства объекта:

В примере выше выводится название танка, давайте выведем все свойства:

nr-repeat-object-iterating

Как получить итератор $index внешнего цикла в контексте внутреннего читайте вот тут.

Проверка условий внутри цикла ng-repeat

Для более качественной обработки цикл можно комбинировать с директивой ng-if. Выведем в первом и последнем элементе горизонтальную черту:

$first и $last переменные в контексте цикла, сигнализируют, соответственно, что выполняется первая и последняя итерации цикла.

hr-ng-repeat-lines

Использование фильтра в цикле

Добавим поле ввода в наш пример, чтобы получить динамический фильтр для списка наших, как выяснилось, танков:

Мы использовали ещё одну директиву ng-model. Она нам нужна для связи с фильтром в ng-repeat.

ng-repeat-filter-sample

Сортировка списка в ng-Repeat

Для сортировки  списка используется расширение синтаксиса директивы ngRepeat оператором orderBy:

В самом простом случае мы указываем имя свойство элемента item, по которому производится сортировка.

Добавим сортировку по названию танка в наш фильтр:

sorted-ng-repeat-filtered-list

Для обратного порядка элементов (реверса) необходимо включить реверс (кыш-кыш, Кэп). Мы добавляем «true» после имени свойства в сортировке:

В примерах выше используется встроенная функция сравнения. Но можно задать и кастомную функцию. Об этом лучше всего почитать в руководстве.

Ограничение числа элементов, выводимых циклом ngRepeat

Если элементов много, а нужно выводить лишь часть?

Можно обойтись уже старыми трюками, например, используя директиву ng-if. Ограничим вывод тремя элементами:

Но разработчики заложили контроль числа элементов прямо в синтаксис директивы ng-repeat:

Оба варианта покажут одно и тоже:

limitto-in-ng-repeat

Возможности limitTo шире, чем демонстрируется в данном примере. Велкам ту офишал гайд.

Мало букафф? Читайте есчо !

Ноябрь 11, 2016 г.

Обмен данных Angular с бек-энд на PHP

Стоит ли рассказывать, что Ангуляр при всей своей прелести лишь одна сторона медали - frontend, который как то должен взаимодействовать со второй половинкой ...

Читать
Декабрь 3, 2016 г.

Фильтр только по нужному столбцу в Angular

Продолжая тему работы с ng-repeat в Ангуляр фреймворк, хочу рассказать о том, как работать с кастомными фильтрами. Можно вернуться к примеру в прошлой ...

Читать

 

Понравилась статья? Есть вопросы? - пишите в комментариях.




Комментарий: