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

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

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

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

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

当使用

ng click

而不是

ng mousedown

时，会恢复同步行为，但是，我更喜欢使用后者，因为这样感觉响应更快（按钮反应更快）

有没有什么（角度）方法可以使方框保持同步并保持鼠标向下移动？

试试这个

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

---

如果在复选框周围使用

的默认行为而不是

，则可以简化任何额外事件处理的需要。单击标签时，它将自动更改其中的任何收音机或复选框

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

更改已检查！

---

输入

是

按钮

的无效子项，保持复选框禁用不是一个选项，对吗？@charlietfl在什么意义上无效？它工作正常。@禁用编码器会使它看起来被禁用，这会让人困惑，复选框应该是功能性的。它将使用

label

而不是

按钮
，并且您不需要
ng mousedown
，因为标签总是会更改
复选框
不是
ng change
（或者更确切地说
onchange
）在
ng单击
（
onclick
）后激发？+1有效（仍不清楚原因）。。。谢谢+谢谢，效果也很好，看起来很干爽！很高兴知道标签捕捉到了这些事件。我总是可以将它们包装在一个按钮中：）另一种方法有太多的事件处理程序，这是一种更安全的方法，尝试将
按钮
放在
标签
中，它不再起作用：（不确定为什么要固定在按钮上，可以设置标签样式以匹配任何按钮css。我从未见过按钮中的输入，没有意义，我可以将其重新设置为按钮样式。我在启动时使用，现在将复选框更改为图标。
  <label ng-class="{active: active1}" >
    <input type="checkbox" ng-model="active1"/>
    Change ng-checked!
  </label>