Angular UI.Bootstrap的单选按钮与ng-repeat相比很奇怪 [英] Angular UI.Bootstrap's radio buttons act strange with ng-repeat

问题描述

我有一个问题是在angular的ui.bootstrap中为无线电模型动态生成选项。我想我可以简单地对数组进行ng-repeat，使用它的btn-radio属性的内容，如下所示：

I have a problem dynamically generating options for a radio model in angular's ui.bootstrap. I thought I could simply ng-repeat over an array, using it's contents for the btn-radio attribute like so:

//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>

我使用的是角1.1.4和ui.bootstrap 0.3.0。

I'm using angular 1.1.4 and ui.bootstrap 0.3.0.

这是我努力的一个方面，正如您所看到的，单选按钮独立行动，不要影响radioModel变量。

Here is a jsfiddle of my efforts, as you can see, the radio buttons act independently and do not affect the radioModel variable.

谢谢！

推荐答案

这是你应该如何写你的标记：

This is how you should write your markup:

<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/

And the working jsFiddle: http://jsfiddle.net/yMLqz/2/

您的方法有2个问题：

• btn-radio 应该与AngularJS表达式一起使用，而不是内插值


• ng-repeat 正在创建一个新范围，因此如果要绑定到父范围上定义的值，则需要考虑这一点

• btn-radio should be used with AngularJS expression, and not an interpolated value
• ng-repeat is creating a new scope so you need to take this into account if you want to bind to a value defined on a parent scope

这篇关于Angular UI.Bootstrap的单选按钮与ng-repeat相比很奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！