在AngularJS + Bootstrap中添加数据切换属性时,单选按钮绑定不起作用

Question

我正在使用AngularJS和Twitter Bootstrap,我想让两个单选按钮看起来像普通的Bootstrap按钮.我在jsFiddle上找到了这个例子,在将它应用到我的情况后,一切看起来都很好但是它没有正常工作.

我想将单选按钮绑定到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>

这是点击"否"(收音机)按钮的结果:

所以,模型根本没有约束力.当我从按钮组中删除data-toggle属性时,一切正常,但单选按钮在Bootstrap按钮的顶部可视化,如下图所示:

我应该怎么做才能让第一张图片中的Bootstrap按钮看起来像这样,并且在第二张图片中正确使用AngularJS模型绑定？

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"相同输入的复选框，然后根据您的支持模型对象的值“手动”设置活动状态。

希望这可以帮助！

Answer 2

明智的编码是正确的。看来您没有使用正确的 Angulerjs 版本。你使用哪个版本？尝试1.3