AngularJS bind class attribute to model - angularjs

Question

I have the following markup:
<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>
I need the class "big" to be set to checked items. The ng-class attribute is not working as expected. Replicated problem in http://jsfiddle.net/qky1ownh/1/.

Answer 1

If you don't want to keep stuffing logic in your view, you could use an object literal to track the changes to the list instead.
$scope.selectedRoles = {
1: true,
2: true,
4: true
};
It allows you to just use ng-model on your checkboxes as well instead of some funky checkbox-list/value type stuff:
<div ng-class="{ big: selectedRoles[role.id] }">
<input type="checkbox" ng-model="selectedRoles[role.id]" />{{role.text}}
</div>
Updated fiddle:
http://jsfiddle.net/qky1ownh/8/

Answer 2

Since selectedRoles is an array of role ids you could just use array.indexOf to find if it in the selected list:-
<div ng-class="{ big: selectedRoles.indexOf(role.id)+1 }">
Since indexOf returns the item's index in the array(zero-based) and -1 when not found just add-up 1 to make it falsy.
Or just add a method in your controller to keep out any logic from the view and the fact that controllers are better testable than template, do :
controller:-
$scope.hasRole = function(id){
return $scope.selectedRoles.indexOf(id) > -1;
}
and use it in the view as:
<div ng-class="{ big: hasRole(role.id) }">

Answer 3

Another option is to apply a selected property to the object.
Fiddle: http://jsfiddle.net/7kfum1uu/
<div ng-class="{ 'big': role.selected }">
<input type="checkbox" ng-model="role.selected">{{role.text}}
</div>