AngularJS связать атрибут класса модель

Question

У меня есть следующий код:

<div ng-app="app" ng-controller="Ctrl"> 
    <label ng-repeat="role in roles"> 
     <div ng-class="{ big: selectedRoles }"> 
      <input type="checkbox" checklist-model="selectedRoles" checklist-value="role.id" />{{role.text}}</div> 
    </label> 
</div> 

Мне нужна класс «большой» должны быть установлен на проверяемые элементы. Атрибут ng-class работает не так, как ожидалось. Реплицированная проблема в http://jsfiddle.net/qky1ownh/1/.

Answer 1

Поскольку selectedRoles является массивом роли идентификаторов вы могли бы просто использовать array.indexOf, чтобы найти, если его в выбранном списке: -

<div ng-class="{ big: selectedRoles.indexOf(role.id)+1 }"> 

С indexOf возвращает индекс элемента в в массиве (начиная с нуля), и - 1, когда не найдено просто добавление 1, чтобы сделать его ложным.

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

контроллера: -

$scope.hasRole = function(id){ 
    return $scope.selectedRoles.indexOf(id) > -1; 
} 

и использовать его с точки зрения, как:

<div ng-class="{ big: hasRole(role.id) }"> 

Answer 2

Если вы не хотите, чтобы держать начинку логику на ваш взгляд, вы могли бы использовать литерал объекта, чтобы отслеживать изменения в списке вместо.

$scope.selectedRoles = { 
    1: true, 
    2: true, 
    4: true 
}; 

Это позволяет использовать только ng-model ваших флажков на а вместо некоторого фанк типа Флажок-лист/значение вещи:

<div ng-class="{ big: selectedRoles[role.id] }"> 
    <input type="checkbox" ng-model="selectedRoles[role.id]" />{{role.text}} 
</div> 

Обновлено скрипку: http://jsfiddle.net/qky1ownh/8/

Answer 3

Другой вариант заключается для применения выбранного объекта к объекту.

Fiddle: http://jsfiddle.net/7kfum1uu/

<div ng-class="{ 'big': role.selected }"> 
     <input type="checkbox" ng-model="role.selected">{{role.text}} 
</div>