angularjs - 在 AngularJS + Bootstrap 中添加数据切换属性时，单选按钮绑定(bind)不起作用

Question

我正在使用 AngularJS 和 Twitter Bootstrap，我想让两个单选按钮看起来像普通的 Bootstrap 按钮。我发现this example在 jsFiddle 上并将其应用到我的案例后，一切看起来都很好，但无法正常工作。

我想将单选按钮绑定(bind)到 Angular 中的模型。这是我的代码:

<div class="btn-group btn-group-lg btn-group-justified" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="isMad" ng-model="isMad" ng-value="false" /> No
    </label>
    <label class="btn btn-default">
        <input type="radio" name="isMad" ng-model="isMad" ng-value="true" /> Yes
    </label>
</div>

<h1>
    I am mad: {{ isMad }}
</h1>

这是单击“否”(单选)按钮的结果:

所以，模型根本没有绑定(bind)。当我从按钮组中删除 data-toggle 属性时，一切正常，但单选按钮仅在 Bootstrap 按钮顶部可视化，如下图所示:

为了让 Bootstrap 按钮看起来像第一张图片中的这些，并与第二张图片中的 AngularJS 模型绑定(bind)一起正常工作，我应该怎么做？

Answer 1

我猜你不是唯一一个对这个问题感到愤怒的人。目前我也面临着同样的问题。

让我向您展示我的解决方法:

 <div class="btn-group">
    <label class="btn btn-info" ng-class="{ active : model === 'value1' }">
      <input type="radio" ng-model="model" value="value1" class="hide"> value 1
    </label>
    <label class="btn btn-info" ng-class="{ active : model === 'value2' }">
      <input type="radio" ng-model="model" value="value2" class="hide"> value 2
    </label>
  </div>

要理解的关键点是删除 data-toggle="buttons"，它会添加导致错误的额外 JavaScript 逻辑。然后在同一输入中使用 class="hide" 隐藏复选框，然后根据支持模型对象的值“手动”设置事件状态。

希望这有帮助!