时间戳

首页 > 解决方案 > AngularJS - Checklist-Model 在复选框更改时未正确更新模型

javascript - AngularJS - Checklist-Model 在复选框更改时未正确更新模型

问题描述

我是 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.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","user"]

在我正在开发的应用程序中，当复选框更改它的值时，我必须调用一个函数，这就是我使用“ng-change”指令的原因。

谁能解释我做错了什么？提前致谢。

标签： javascriptangularjschecklist-model

解决方案

checklist-model它在复选框中使用 Id 作为清单值，在您的代码中使用文本。所以在函数$scope.checkAll你应该返回item.text而不是item.id在函数$scope.checkFirst你应该推送$scope.roles.find(item => item.id == 1).text 其余的似乎是正确的

推荐阅读