AngularJS提交表单时如何传递data-toggle更新后的值？

你遇到的问题核心是Bootstrap的data-toggle="buttons"和AngularJS的双向绑定逻辑冲突了——Bootstrap会直接操作DOM来切换按钮的active类，但不会同步更新Angular的ng-model，导致点击按钮时playerinfo.StateLevel始终没变化。

这里有几个关键修改点，帮你搞定这个问题：

• 移除Bootstrap的data-toggle="buttons"：这个属性会让Bootstrap接管按钮组的选中状态，和Angular的数据驱动逻辑“打架”，删掉它就能让Angular完全控制绑定状态。
• 优化ng-class的判断逻辑：不用字符串键值对的复杂写法，直接用布尔表达式判断，更简洁准确。
• 用ng-value替代value：原生value只能传递字符串，而你需要绑定的是布尔值，ng-value可以直接绑定布尔类型的值，确保playerinfo.StateLevel拿到的是正确的布尔类型数据，而非字符串。

修改后的完整代码如下：

<form class="form-horizontal" name="addForm.REFForm" role="form" ng-submit="saveInfo(currentPlayer.Player,playerinfo.StateLevel)" novalidate>
  <div class="btn-group">
    <label class="btn btnProfileDefault" ng-class="{'active': playerinfo.StateLevel}">
      <input type="radio" ng-value="true" name="StateLevel" ng-model="playerinfo.StateLevel"> Yes
    </label>
    <label class="btn btnProfileDefault" ng-class="{'active': !playerinfo.StateLevel}">
      <input type="radio" ng-value="false" name="StateLevel" ng-model="playerinfo.StateLevel"> No
    </label>
  </div>
</form>

这样修改后，点击"Yes"或"No"按钮时，Angular会正确同步playerinfo.StateLevel的布尔值，提交表单时saveInfo就能拿到更新后的正确值了。

内容的提问来源于stack exchange，提问作者Ritesh Gore