Question

所以我有一个间歇性的问题。我有以下标记：

<div ng-repeat="rs in vm.roles | chunkBy:2">
    <div ng-class="rs.length === 2 ? 'col-lg-6' : 'col-lg-12'" ng-repeat="r in rs">
        <label>
            <input type="checkbox" ng-model="vm.model[r.id]" /> {{r.name}}
        </label>
    </div>
</div>

这构建了许多与模型上属性相关联的角色，这些角色基于角色的id。像56caafa5-f667-4d8a-bbea-a5a0a6b3e8c0这样的东西就是属性名称。 注意：该属性可能存在也可能不存在，但我已经验证了该行为是否相同，无论其存在。

有时候您必须单击两次复选框才能进行更改。奇怪的是，如果我使用ng-checked代替ng-model，问题不会发生，但当然这意味着我必须手动更新模型

这是一个已知问题吗？

或者我需要改变什么？

希望我不必使用ng-checked和代码隐藏更改。

我已在此Plunkr中复制了此问题：https://plnkr.co/edit/gDDurHYY0EC7TMnuQ52t?p=preview

Answer 1

vm.model[r.id]用于复选框的ng-model评估为通过角度内齿轮布置非常严格的模式。对于预期的行为，您最好在后端（或从中检索它）或在特殊的自定义prepare（）方法中将其显式转换为布尔值。

Answer 2

查看链接中提到的代码，script.js就是这样的

** script.js **

    // Code goes here

var mod = angular.module('app', ['a8m.chunk-by']);
mod.controller('AppController', function() {
  var vm = this;

  vm.model = {
    1: true,
    3: true,
    13: true,
    "97547711-7024-4de6-be02-53fef122b8ca": true,
    "97547711-7024-4de6-be02-53fef122b8cd": true
  };

  vm.roles = [
    {id: "97547711-7024-4de6-be02-53fef122b8ca", name: "Role 1"},
    {id: "97547711-7024-4de6-be02-53fef122b8cb", name: "Role 2"},
    {id: "97547711-7024-4de6-be02-53fef122b8cc", name: "Role 3"},
    {id: "97547711-7024-4de6-be02-53fef122b8cd", name: "Role 4"},
    {id: "97547711-7024-4de6-be02-53fef122b8ce", name: "Role 5"}
  ];

  vm.modules = [
    {id: 1, name: "Role 1"},
    {id: 2, name: "Role 2"},
    {id: 3, name: "Role 3"},
    {id: 4, name: "Role 4"},
    {id: 5, name: "Role 5"},
    {id: 6, name: "Role 6"},
    {id: 7, name: "Role 7"},
    {id: 8, name: "Role 8"},
    {id: 9, name: "Role 9"},
    {id: 10, name: "Role 10"},
    {id: 11, name: "Role 11"},
    {id: 12, name: "Role 12"},
    {id: 13, name: "Role 13"},
    {id: 14, name: "Role 14"},
    {id: 15, name: "Role 15"}
  ];
});

在您的模板中，对于每个部分（例如，角色或作业），您使用两个ng-repeats。

<div ng-repeat="rs in vm.roles | chunkBy:2">
<div ng-class="rs.length === 2 ? 'col-lg-6' : 'col-lg-12'" ng-repeat="r in rs">

对于角色，第一个ng-repeat rs in vm.roles会提供{id: "97547711-7024-4de6-be02-53fef122b8ca", name: "Role 1"}

第二次重复重复r in rs提供97547711-7024-4de6-be02-53fef122b8ca和1

所以，它的rs有id，而不是r。因此，使用vm.model[r.id]导致不一致的行为。我希望它只是不正确的实现而不是某种要求。

我稍微修改了模板。我希望它能为您提供帮助

<div ng-repeat="rs in vm.roles">
  <div ng-class="rs.length === 2 ? 'col-lg-6' : 'col-lg-12'">
    <label>
      <input type="checkbox" ng-model="vm.model[rs.id]" />
            {{rs.name}}
        </label>
  </div>
</div>

ngModel有时需要两次点击检查CheckBox

2 个答案: