Обзор директив AnugularJS: ng-class, ng-click, ng-show, ng-switch, ng-if, ng-init, ng-repeat

Обзор директив AnugularJS: ng-class, ng-click, ng-show, ng-switch, ng-if, ng-init, ng-repeat.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Используемые технологии и библиотеки
  • Spring MVC 4.2.4.Release
  • AngularJS 1.5.0
  • IntelliJ IDEA 15.0.2

1. Описание задачи

Рассмотреть пример использования директив AnugularJS: ng-class, ng-click, ng-show, ng-switchng-if, ng-init, ng-repeat.

2. Структура проекта

Структура проекта не поменялась с прошлой части. Рассматриваемые директивы находятся в соответствующих jsp страницах: ng-class.jspng-click-show.jspng-if-switch.jspng-init.jspng-repeat.jsp.

3. ng-class

Были заданы два класса .errorClass и .boldClass. Ниже с помощью директивы ng-class были перечислены названия классов и boolean значение после двоеточия. При значение true класс будет присвоен элементу p. В данном случае оба значения выставлены в true и поэтому надпись будет красная, жирная, с подчеркиванием и фоном.

ng-class

4. ng-click и ng-show

Директива ng-show показывает или прячет HTML элемент в зависимости от вычисленного выражения в атрибуте (в данном случае в зависимости от значения переменной visible или someValue). Элемент скрывается или показывается путем добавления или удаления css класса .ng-hide.

Директива ng-hide устанавливает по умолчанию стиль display:none с использованием флага !important. В нашем примере при значении visible (или someValue) = false элемент будет показываться (display:none > false).

Директива ng-click срабатывает по клику и выполняет выражение указанное в атрибуте. Здесь задает значения у соответствующей переменной в false или true.

ng-click-show

5. ng-init

ng-init позволяет вычислить выражение в текущем scope.

С помощью директивы ng-init при загрузке страницы мы инициализируем переменные, указанные в значении атрибута. В результате получим такую страницу при первой загрузке:

ng-init

6. ng-if и nf-switch

С помощью директивы ng-if можно показать или убрать целый кусок DOM на основании выражения, указанного в атрибуте. Эта директива отличается от ng-show, ng-hide тем, что полностью убирает элемент из дерева DOM, а не добавляет к нему какого-либо css стиля.

Директива ng-switch позволяет переключаться между значениями объекта (например массива) и в случае выполнения логического выражения покажет или скроет DOM элемент. В нашем случае будет показан только элемент для которого значения link=’javastudy.ru’.

ng-if-switch

7. ng-repeat

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

Variable Type Details
$index number Итератор для повторяющихся элементов (0..length-1)
$first boolean true если элемент первый в итераторе.
$middle boolean true если элемент находится между первым и последним в итераторе.
$last boolean true если элемент последний в итераторе.
$even boolean true позиция в итераторе $index четная (в противном случае false).
$odd boolean true позиция в итераторе $index нечетная (в противном случае false).

ng-repeat

 

Исходные коды

MVC_AngularJS_Html5 full project — полный проект Spring MVC + AngularJS + Bootstrap + HTML5.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Share Button
16
12171 Total Views 2 Views Today

One thought on “Обзор директив AnugularJS: ng-class, ng-click, ng-show, ng-switch, ng-if, ng-init, ng-repeat

  1. Дмитрий:

    Вопрос по последнему примеру где ng-repeat. Есть ли такое свойство, которое проверяет пустая ли строка или нет? К примеру где-то не будет адреса, и вместо пустой строки выводить «No Link».

Добавить комментарий