Angular UI.Bootstrap'的单选按钮在ng-repeat中表现得很奇怪

Angular UI.Bootstrap's radio buttons act strange with ng-repeat

本文关键字：ng-repeat Bootstrap UI 单选按钮 Angular 更新时间：2023-09-26

我在angular的ui.bootstrap中动态生成无线电模型的选项时遇到了一个问题。我想我可以简单地重复数组，使用它的内容为btn-radio属性，像这样:

//in the controller
$scope.radioModel =  undefined;
$scope.radioModelButtons = ["a", "b", "c"];
//in the html
<div class="btn-group" >
  <button ng-repeat="value in radioModelButtons"
    class="btn" type="button" ng-model="radioModel"
    btn-radio="'{{value}}'">
      {{value}}
  </button>
</div>

我使用angular 1.1.4和ui。引导0.3.0。

这是我的工作示例，如您所见，单选按钮独立工作，不影响radiommodel变量。

谢谢!

你应该这样写你的标记:

<button ng-repeat="value in radioModelButtons"
        class="btn" type="button" ng-model="radio.model"
        btn-radio="value">
          {{value}}
</button>

和工作jsFiddle: http://jsfiddle.net/yMLqz/2/

你的方法有两个问题:

btn-radio应该与AngularJS表达式一起使用，而不是插入值
ng-repeat正在创建一个新的作用域，所以如果你想绑定到父作用域