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'。这也是导致未检查问题的原因，字符串＆＃34; 0＆＃34;是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;
}

Answer 2

如上所述，如果你忘记了true，false，0和1，只考虑两个字符串'0'和'1'，Angular的效果最好（在这个上下文中） - 虽然一旦你意识到它可以正常使用字符串，你可以使用任何我想'是/否''真/假'

你需要正确使用：

ng-model = "object.property"
ng-true=value="'1'" // note the string
ng-false-value = "'0'"
ng-checked = "object.property=='1'"

然后它完美运行，不需要其他工作。如果需要，可以使用ng-change进行通知，但不要使用它来更改object.property的状态，否则会发生冲突

Answer 3

你可以简单地改变如下，休息模型会自动完成。你也不需要进行ng-checked，因为你已经在使用ng-model。

<input type="checkbox"  ng-model="person.active" ng-change="staffCtrl.activeUpdate(person)" ng-true-value="'1'" ng-false-value="'0'">

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

3 个答案: