我正在使用 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)一起正常工作,我应该怎么做?
最佳答案
我猜你不是唯一一个对这个问题感到愤怒的人。目前我也面临着同样的问题。
让我向您展示我的解决方法:
<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"
隐藏复选框,然后根据支持模型对象的值“手动”设置事件状态。
希望这有帮助!
关于angularjs - 在 AngularJS + Bootstrap 中添加数据切换属性时,单选按钮绑定(bind)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32966449/