четверг, 27 октября 2016 г.

AngularJs ng-repeat

Рассмотрим директиву ngRepeat.
Это обычный итератор по списку,  пример:
<div ng-repeat="i in [1,2,3,4,5]">{{i}}</div>
Вывод будет следующий: 12345
У данной директивы есть набор свойств, к которым можно обратить в области видимости данной директивы(в примере выше - до тега </div> )
Параметр Описание
$index Порядковый номер элемента [0 - length-1]
$first Возвращает true если первый элемент
$last Возвращает true если последний элемент
$middle Возвращает true если не первый и не последний элемента
$even true если четный элемент
$odd trye если нечетное число

Очень удобно с помощью данной директивы строить таблицы:
<table>
        <tr  >
            <th />
            <th ng-repeat="dayOfWeek in scheduleResult.dayOfWeeks" >
                {{dayOfWeek}}</th>

        </tr>
        <tr ng-repeat="recordElement in scheduleResult.recordDates" >
            <td >{{recordElement.date|date:'HH:mm'}}</td>
            <td ng-repeat="empty in recordElement.empties track by $index" ng-class="classStyle(empty)"
                ng-click="addRecord($index, recordElement.date, 'block', empty, scheduleResult.recordDates.indexOf(recordElement) );">{{empty}}</td>



        </tr>
    </table>
В recordElement.empties хранится массив, состоящий из true или false, в этом случае приходится использовать перебор по индексу track by $index", иначе будет ошибка Error: [ngRepeat:dupes]

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

Отправить комментарий