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

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