Question

按钮内有一个复选框：

<button ng-mousedown="active = !active">
    <input type="checkbox" ng-checked="active"/>
    Toggle!
</button>

单击该按钮可切换状态变量"active"。我想将复选框与"active"同步。如果我宣布

ng-model="active",

只要在复选框外按下按钮，该框就会与按钮同步。

问题是当单击该复选框时，它会更改状态，但也会向该按钮发送click事件，因此两个事件都会触发，因此该框变得不同步：

http://jsbin.com/wepul/7/edit

使用ng-click代替ng-mousedown时会恢复同步行为，但是，我更喜欢使用后者，因为它感觉响应更快（按钮反应更快）。

是否有任何（Angular）方式我可以让该框同步并保留ng-mousedown？

Answer 1

如果您在复选框而不是<label>周围使用<button>的默认行为，则可以简化对额外事件处理的任何需求。单击标签时，它将自动更改其中的任何单选按钮或复选框

  <label ng-class="{active: active1}" >
    <input type="checkbox" ng-model="active1"/>
    Change ng-checked!
  </label>

的 DEMO

Answer 2

试试这个

  <button ng-class="{active: active1}" ng-mousedown="active1 = !active1">
    <input type="checkbox" ng-model="active1" ng-change="active1=!active1"/>

如何在AngularJS中同步复选框里面的切换按钮？

2 个答案: