angularjs - ng-change on复选框需要2点击

我有一个控制器，它获取用户列表和列出用户的视图以及用于显示和设置用户是否处于活动状态的复选框...

.controller('StaffCtrl', ['StaffService', function(StaffService) {
  var self = this;
  self.staff = StaffService.query();
  self.activeUpdate = function(person){
    StaffService.update({id:person.id}, person);
  };
}]);

<tr ng-repeat="person in staffCtrl.staff">
  <td>{{ person.name_full }} </td>
  <td><input type="checkbox" ng-checked="person.active" ng-model="person.active" ng-change="staffCtrl.activeUpdate(person)" ng-true-value="1" ng-false-value="0"></td>
</tr>

单击该复选框一次触发activeUpdate，将进行异步调用并更新用户，但是在视图中，该复选框本身不会消失（在最新的Chrome和Firefox中）。如果现在再次单击它，复选标记将消失，并且不会调用activeUpdate。如果我再次单击该支票，则再次出现该支票，并且所有呼叫都同时发出，总是只有在添加支票时，始终要单击两次才能删除支票！

我究竟做错了什么？

更新：人员列表的示例JSON（使用curl查询REST API ...）

[
    {
        "active": 1,
        "id": 1,
        "name_first": "Ed",
        "name_full": "Tech, Ed",
        "name_last": "Tech",
        "name_middle": null,
        "uri": "/sips/api/staff/1",
        "username": "admin"
    },
    {
        "active": 1,
        "id": 252,
        "name_first": "test",
        "name_full": "aatest, test",
        "name_last": "aatest",
        "name_middle": "something",
        "uri": "/sips/api/staff/252",
        "username": "testteacher"
    },
    ...
]

最佳答案

一起使用ng-checked和ng-model可能会发生冲突，它们都希望设置复选框的实际选中状态。其次，ng-true-value和ng-false-value似乎仅适用于字符串。因此，当您单击以设置值时，它将person.active从数字1更改为字符串'1'。这也是导致取消选中问题的原因，字符串“ 0”是true值，因此ng-checked认为应选中该框，而ng-model则不选中。

而且，由于ngTrueValue仅接受常量表达式，因此我看不到一种简单的方法来让它使用active的数字来执行您想要的操作。 （Angular Source）

您可能可以跳过使用ngModel的操作，而可以使用ngChecked进行显示，而使用ngClick的方法使用plunker更新属性：

<input type="checkbox" ng-checked="person.active"
       ng-click="updateActive(person)"</input>

JS：

self.updateActive = function(person) {
  console.dir(person);
  person.active = 1 - person.active;
}

关于angularjs - ng-change on复选框需要2点击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28571795/