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

Steverippl

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

.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"
    },
    ...
]
杰森·古玛(Jason Goemaat)

同时使用ng-checkedng-model可能会产生冲突,它们都希望设置复选框的实际选中状态。其次,ng-true-valueng-false-value似乎只与字符串工作。因此,当您单击以设置值时,它会person.active从数字1变为字符串'1'这也是导致取消选中问题的原因,字符串“ 0”是一个true值,因此ng-checked认为应该选中该框,但ng-model不要选中该框

而且,由于ngTrueValue仅接受常量表达式,因此我看不到一种简单的方法来使它完成您想要的数字操作active角源

您可能可以跳过使用ngModel,而是改为使用ngCheckeddisplay,并使用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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用ng-change AngularJs保存复选框状态

来自分类Dev

ng-change 未在复选框中调用

来自分类Dev

复选框中的ng-change被触发了多次,因为在其上单击ng

来自分类Dev

检测Angular.js ng-change事件中的复选框是否处于选中状态

来自分类Dev

如果javascript设置了ng change事件,则复选框不会触发

来自分类Dev

带有$ event.target的AngularJS复选框ng-change问题

来自分类Dev

未从标签内的复选框中触发ng-change

来自分类Dev

AngularJS复选框和ng-change的工作原理很奇怪

来自分类Dev

ionic / Angularjs-无法在ng-change上取消选中复选框

来自分类Dev

如果是由javascript设置的,则ng change事件不会在复选框上触发

来自分类Dev

如何在angularjs中为复选框存储有效的ng-change事件

来自分类Dev

angular 指令生成的复选框不响应 ng-change

来自分类Dev

Angular ng-change 不适用于复选框

来自分类Dev

Angular,在ng-repeat中选中复选框(或单选)需要Ng

来自分类Dev

Jquery .change 数组中的复选框

来自分类Dev

AngularDart ng-change

来自分类Dev

如何使用复选框选择ng2-smart-table组件中的多行?

来自分类Dev

如何在 Angular-4 的 ng2-table 中添加复选框?

来自分类Dev

选择所有复选框以选择嵌套的角度ng-repeat复选框?

来自分类Dev

标题上的ng-grid Event for Selection复选框

来自分类Dev

angularjs访问ng-repeat复选框

来自分类Dev

AngularJS:使用ng-repeat生成复选框

来自分类Dev

ng-click Parent div的子复选框

来自分类Dev

ng-checked /复选框的异常行为

来自分类Dev

如何使用ng-model知道复选框的值

来自分类Dev

AngularJS:使用ng-repeat复选框

来自分类Dev

ng-checked不工作角复选框

来自分类Dev

如何使用ng-model发布复选框的值?

来自分类Dev

在ng-repeat中为选定的复选框取值

Related 相关文章

  1. 1

    使用ng-change AngularJs保存复选框状态

  2. 2

    ng-change 未在复选框中调用

  3. 3

    复选框中的ng-change被触发了多次,因为在其上单击ng

  4. 4

    检测Angular.js ng-change事件中的复选框是否处于选中状态

  5. 5

    如果javascript设置了ng change事件,则复选框不会触发

  6. 6

    带有$ event.target的AngularJS复选框ng-change问题

  7. 7

    未从标签内的复选框中触发ng-change

  8. 8

    AngularJS复选框和ng-change的工作原理很奇怪

  9. 9

    ionic / Angularjs-无法在ng-change上取消选中复选框

  10. 10

    如果是由javascript设置的,则ng change事件不会在复选框上触发

  11. 11

    如何在angularjs中为复选框存储有效的ng-change事件

  12. 12

    angular 指令生成的复选框不响应 ng-change

  13. 13

    Angular ng-change 不适用于复选框

  14. 14

    Angular,在ng-repeat中选中复选框(或单选)需要Ng

  15. 15

    Jquery .change 数组中的复选框

  16. 16

    AngularDart ng-change

  17. 17

    如何使用复选框选择ng2-smart-table组件中的多行?

  18. 18

    如何在 Angular-4 的 ng2-table 中添加复选框?

  19. 19

    选择所有复选框以选择嵌套的角度ng-repeat复选框?

  20. 20

    标题上的ng-grid Event for Selection复选框

  21. 21

    angularjs访问ng-repeat复选框

  22. 22

    AngularJS:使用ng-repeat生成复选框

  23. 23

    ng-click Parent div的子复选框

  24. 24

    ng-checked /复选框的异常行为

  25. 25

    如何使用ng-model知道复选框的值

  26. 26

    AngularJS:使用ng-repeat复选框

  27. 27

    ng-checked不工作角复选框

  28. 28

    如何使用ng-model发布复选框的值?

  29. 29

    在ng-repeat中为选定的复选框取值

热门标签

归档