Директивы стилизации и управления элементами

В особую группу директив можно выделить директивы, которые позволяют стилизовать элементы или управлять ими:

• ng-style: устанавливает у элемента стили css

• ng-class: задает элементу определенный класс

• ng-class-even: устанавливает класс для четных элементов

• ng-class-odd: устанавливает класс для нечетных элементов

• ng-hide: скрывает элемент

• ng-show: делает элемент видимым

• ng-if: задает для элемента некоторое условие

ng-class и ng-style

Данные директивы служат стилизации элементов. Объявим в контроллере два объекта:

$scope.somestyle={background: '#eee', color:'#333'};
$scope.someclass="myclass";

myclass в данном случае - это название класса, который содержит определение в файле стилей css. И на страничке будет такая разметка:

<div ng-controller="phonesController">
<div ng-style="somestyle">Директива ng-style</div>
<div ng-class="someclass">Директива ng-class</div>
</div>

ng-show и ng-hide

Директивы ngshow и nghide служат для отображения и скрытия элемента соответственно. Например, создадим в контроллере еще один объект для хранения булевых значений:

$scope.data={visible : false};

В разметке страницы создадим два параграфа и флажок, переключая который, мы будем управлять видимостью параграфов:

<div ng-controller="phoneController">
<p ng-show="data.visible">Первый блок</p>
<p ng-hide="data.visible">Второй блок</p>
<input type="checkbox" ng-model="data.visible">Открыть/скрыть
</div>

Первоначально у нас объект data.visible равен false, поэтому первый блок будет не виден. Изменяя значение флажка, который привязан к объекту visible опять же через директиву ng-model, мы также изменяем значение data.visible, что изменяет видимость параграфов.

ng-if

Действие ng-if во многом похоже на действие ng-show/ng-hide. Если ng-if принимает значение false, то элемент с директивой удаляется из структуры DOM, а при значении true, наоборот, добавляется:

<div ng-controller="phoneController">
<input type="checkbox" ng-model="data.visible">Открыть/скрыть
<p ng-if="data.visible">Первый блок</p>
<p ng-if="!data.visible">Второй блок</p>
</div>