Question

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

  <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

Answer 1

Javascript实际上并没有改变单选按钮的值;它只是切换掩盖单选按钮的按钮的active类。

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

Answer 2

此行（来自您的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捕获包装标签上的click事件，然后AngularJS可以在无线电输入上注册它。从代码中删除引导程序JS可以解决问题（或者至少解决它）。

通常，将Bootstrap JS与AngularJS一起使用会出现问题。

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

ng-repeat中的Bootstrap无线电

2 个答案: