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

【问题标题】：How to sync checkbox inside toggle button in AngularJS?如何在AngularJS中的切换按钮内同步复选框？
【发布时间】：2014-10-05 14:22:12
【问题描述】：

按钮内有一个复选框：

<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 时，同步行为会恢复，但是，我更喜欢使用后者，因为这样感觉更灵敏（按钮反应更快）。

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

【问题讨论】：

input 是 button 的无效子代
并且禁用复选框不是一种选择，对吧？
@charlietfl 在什么意义上无效？它工作正常。
@coder 禁用会使其看起来被禁用，这会令人困惑，该复选框应该可以正常工作
我会使用label而不是button，你不需要ng-mousedown，因为标签总是会改变checkbox

标签： javascript angularjs button checkbox

【解决方案1】：

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

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

DEMO

【讨论】：

+1 谢谢，效果也很好，看起来更干！很高兴知道标签捕捉事件。而且我总是可以将它们包裹在一个按钮中:)
另一种方法的事件处理程序太多，这是更安全的方法
尝试在label 中添加button，但它不再起作用了:( jsbin.com/locevonulipi/2/edit
不确定为什么要固定在按钮上，可以设置标签样式以匹配您拥有的任何按钮 css。我从未见过按钮中的输入，没有意义
没错，我可以将其重新设置为按钮。我正在为我的启动使用33hotels.com，现在将复选框更改为图标。

【解决方案2】：

试试这个

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

【讨论】：

ng-change（或者更确切地说是onchange）不是在ng-click（onclick）之后被解雇的吗？
+1 它有效（仍然不太清楚为什么）！ ...谢谢！