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不会被调用。如果我再次单击支票再次出现并同时进行所有呼叫，总是仅在添加支票时，删除它始终需要 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"
    },
    ...
]
4

3 回答 3

8

使用ng-checkedandng-model一起可能会发生冲突，他们都想设置复选框的实际选中状态。其次，ng-true-value似乎ng-false-value只适用于字符串。因此，当您单击设置值时，它会person.active从数字 1 变为 string '1'。这也是导致取消选中问题的原因，字符串“0”是一个true值，因此ng-checked认为该框应该被选中但ng-model没有。

而且由于ngTrueValue只接受常量表达式，我看不出有一种简单的方法可以让它用数字来做你想做的事情active。（角源）

您可能可以跳过 usingngModel而是使用ngCheckedfor display 并使用plunkerngClick方法更新您的属性：

<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;
}
于 2015-02-17T22:21:41.847 回答
2

如上所述，如果你忘记了真、假、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 的状态，否则当然会有冲突

于 2015-06-15T04:26:02.260 回答
0

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

<input type="checkbox"  ng-model="person.active" ng-change="staffCtrl.activeUpdate(person)" ng-true-value="'1'" ng-false-value="'0'">
于 2017-05-24T05:38:06.390 回答