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

Question

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

.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不会被调用.如果我再次单击,则会再次显示检查并且同时进行所有呼叫,始终仅在添加检查时,一次性删除它需要2次点击!

我究竟做错了什么？

更新:人员列表的示例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"
    },
    ...
]

Answer 1

使用ng-checked和ng-model一起可能会发生冲突,他们都希望设置复选框的实际检查状态.其次,ng-true-value和ng-false-value似乎只处理字符串.因此,当您单击以设置值时,它会person.active从数字1更改为字符串'1'.这也是导致取消检查问题的原因,字符串"0"是一个true值,因此ng-checked认为应该检查该框但ng-model不是.

而且由于ngTrueValue只接受常量表达式,我没有看到一种简单的方法来让它用数字来做你想要的active.(角源)

您可以跳过使用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;
}