Директивы и фильтры

категория: AngularJS

Директивы

Что такое директивы? Директивы - это способ научить html новым фишкам. Все что начинается с ng- - это встроенная в Angular директива, но можно создавать и собственные. Встроенных директив очень много, буду описывать самые распространенные. ng-app - показывает какой модуль будет обрабатывать страницу ng-controller - указывает какой контроллер будет обрабатывать блок ng-model - добавляет в память и выводит в выражении {{ name }}
<input type="text" ng-model="name"/> {{ name }}
ng-init - инициализирует данные ng-repeat - вывод в цикле
<div ng-init="names=['one', 'two', 'three', 'four']">
<ul>
  <li ng-repeat="name in names">{{ name }}</li>
</ul>
</div>

Фильтры

Понимание фильтров я думаю всем известно. Рассмотрим парочку, предоставленных нам Ангуляром currency - форматирует цифру в денежный формат, выведем сто тысяч грн. без копеек:
{{ 100000 | currency:"₴":0}}
date - форматирование даты на любой вкус, так же отлично справляется с джанговсой датой и временем из DateTimeField limitTo - ограничивает вывод из списка до числа заданного лимитом lowercase - конвертирует строку в нижний регистр uppercase - конвертирует строку в верхний регистр number - округляет число orderBy - сортирует массив filter - это вообще магическая штука, выбирает подмножество элементов из массива и возвращает его в качестве нового массива. Одним словом полноценный поиск по элементам можно сделать:
<input type="text" ng-model="nameText"/>
<ul>
  <li ng-repeat="friend in friends | filter:nameText | orderBy:'name'">
    {{ friend.name }} - {{ friend.city }}
  </li>
</ul>


blog comments powered by Disqus