Angular UI.Bootstrap的单选按钮与ng-repeat相比很奇怪

Question

我有一个问题是动态地为angular的ui.bootstrap中的无线电模型生成选项.我想我可以简单地对一个数组进行ng-repeat,使用它的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.bootstrap 0.3.0.

这是我努力的一个方面,你可以看到,单选按钮独立运行,不影响radioModel变量.

谢谢!

Answer 1

这是您应该如何编写标记:

<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 正在创建一个新范围,因此如果要绑定到父范围上定义的值,则需要考虑这一点