I'm really quite new at angular js.As I'm trying to use the directive: checklist-model
But I can not find why it is not working:
In the html I'm trying to use the value of "graduated" to set the value of the checkbox of each of the items in my array of roles. But the problem is that when you click on the checkAll button or the uncheck all button if you update the model but not the view.
Code:
angular.module("DemoApp", ["checklist-model"])
.controller('DemoCtrl', function($scope) {
$scope.roles = [
{id: 1, text: 'guest', graduado: true},
{id: 2, text: 'user', graduado: false},
{id: 3, text: 'customer', graduado: false},
{id: 4, text: 'admin', graduado: true}
];
$scope.checkAll = function() {
//$scope.roles = $scope.roles.map(function(item) { return item.id; });
var index = 0;
angular.forEach($scope.roles, function (item) {
$scope.roles[index].graduado = true;
index++;
});
};
$scope.uncheckAll = function() {
var index = 0;
angular.forEach($scope.roles, function (item) {
$scope.roles[index].graduado = false;
index++;
});
};
$scope.checkFirst = function() {
$scope.user.roles.splice(0, $scope.user.roles.length);
$scope.user.roles.push(1);
};
});<script src="https://vitalets.github.io/checklist-model/checklist-model.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="DemoCtrl">
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="roles" checklistvalue="role.graduado"> {{role.text}}-{{role.graduado}}
</label>
<br>
<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>
<button ng-click="checkFirst()">check first</button>
<br><br>
user.roles {{ user.roles | json }}
</div>