我有一个控制器,它获取用户列表和列出用户的视图以及用于显示和设置用户是否处于活动状态的复选框...
.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
。(角源)
您可能可以跳过使用ngModel
,而是改为使用ngChecked
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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句