javascript - 如何在 AngularJS 中同步切换按钮内的复选框？

Question

我在按钮内有一个复选框:

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

点击按钮切换状态变量“active”。我想将复选框与 "active" 同步。如果我声明

ng-model="active",

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

问题是当复选框被点击时，它改变了状态但也发送了点击事件给按钮，所以两个事件都会触发，结果是复选框变得不同步:

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

当使用 ng-click 而不是 ng-mousedown 时，同步行为会恢复，但是，我更喜欢使用后者，因为这样感觉更灵敏(按钮 react 更快)。

有什么(Angular)方法可以让盒子保持同步并保持 ng-mousedown 吗？

Answer 1

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

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

DEMO