ng-repeat 中的引导无线电答案

【问题标题】：Bootstrap radios in ng-repeatng-repeat 中的引导无线电
【发布时间】：2014-03-13 22:53:30
【问题描述】：

我在 ng-repeat 指令中使用引导单选按钮。但是，更改不会传播到基础模型。这是代码：

  <a href="#" class="btn btn-primary" ng-click="data.list.push({ value: 1 })">Add Item</a>
  <div class="alert alert-info">
    <div ng-repeat="item in data.list track by $index">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-sm btn-default"><input type="radio" data-ng-model="item.value" value="1">1</label>
        <label class="btn btn-sm btn-default"><input type="radio" data-ng-model="item.value" value="2">2</label>
      </div> {{ item.value }}
    </div>
  </div>

只要我删除按钮组并用普通的单选按钮替换它，同样的例子就可以工作了：

  <a href="#" class="btn btn-primary" ng-click="data2.list.push({ value: 1 })">Add Item</a>
  <div class="alert alert-info">
    <div ng-repeat="item in data2.list track by $index">
      <input type="radio" data-ng-model="item.value" value="1">
      <input type="radio" data-ng-model="item.value" value="2">
      {{ item.value }}
    </div>
  </div>

我已经设置了一个 plunkr：http://plnkr.co/edit/ROLW8lluX6DrM3w2UUlH?p=preview

【问题讨论】：

标签： angularjs twitter-bootstrap radio-button

【解决方案1】：

这条线（来自您的 plunker）是问题所在：

<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Bootstrap JS 在 AngularJS 可以在无线电输入上注册它之前捕获包装标签上的点击事件。从代码中删除引导 JS 可以解决问题（或至少可以解决问题）。

一般来说，将 Bootstrap JS 与 AngularJS 一起使用可能会出现问题。

请考虑改用AngularUI Bootstrap 库。它还提供了隐藏为按钮的无线电输入的实现，以及其他一些与 Bootstrap JS 相关的功能。

【讨论】：

【解决方案2】：

Javascript 实际上并没有改变单选按钮的值；它只是切换隐藏单选按钮的按钮的active 类。

考虑使用来自AngularUI Bootstrap 的按钮指令。

【讨论】：