Я новичок в AngularJS, и у меня возникла проблема с директивой Checklist-Model.
Я использую один из их примеров для репликации этого поведения.Когда я нажимаю один флажок и вызываю функцию, кажется, что модель корректно обновляется и отображается соответствующим образом в шаблоне, но когда я регистрирую содержимое модели на консоли, значение флажка, который я щелкнул, отсутствует.Вот когда начинаются странные вещи.Если я снова установлю флажок, то значение будет удалено из шаблона, но я вижу его на консоли.
Вот код:
HTML:
<div ng-controller="DemoCtrl">
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles"
checklist-value="role.text"
ng-change="changeValues(role)"> {{role.text}}
</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>
Angular:
angular.module("DemoApp", ["checklist-model"])
.controller('DemoCtrl', function($scope) {
$scope.roles = [
{id: 1, text: 'guest'},
{id: 2, text: 'user'},
{id: 3, text: 'customer'},
{id: 4, text: 'admin'}
];
$scope.user = {
roles: ['guest', 'admin']
};
$scope.checkAll = function() {
$scope.user.roles = $scope.roles.map(function(item) { return item.id; });
};
$scope.uncheckAll = function() {
$scope.user.roles = [];
};
$scope.checkFirst = function() {
$scope.user.roles.splice(0, $scope.user.roles.length);
$scope.user.roles.push(1);
};
$scope.changeValues = function() {
console.log('Roles: ', JSON.stringify($scope.user.roles));
}
});
Первый раз, когда я нажимаю флажок, т. Е .: «Пользователь», вывод на консоль будет:
Роли: ["guest", "admin"]
Затем, когда я снимаю галочку с того же флажка, вывод будет:
Роли: ["guest", "admin", "user"]
В разрабатываемом приложенииЯ ДОЛЖЕН вызывать функцию, когда флажок меняет ее значение, поэтому я использую директиву ng-change.
Кто-нибудь может объяснить, что я делаю неправильно?Заранее спасибо.