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

问题描述

我在 angular 的 ui.bootstrap 中为无线电模型动态生成选项时遇到问题.我以为我可以简单地对数组进行 ng-repeat，将它的内容用于 btn-radio 属性，如下所示:

//在控制器中$scope.radioModel = 未定义；$scope.radioModelButtons = ["a", "b", "c"];//在html中<div class="btn-group" ><button ng-repeat="radioModelButtons 中的值"class="btn" type="button" ng-model="radioModel"btn-radio="'{{value}}'">{{价值}}

我使用的是 angular 1.1.4 和 ui.bootstrap 0.3.0.

这是我的一个 jsfiddle，如您所见，单选按钮独立运行，不会影响 radioModel 变量.

谢谢！

解决方案

这是你应该如何编写你的标记:

{{价值}}

还有正在运行的 jsFiddle:http://jsfiddle.net/yMLqz/2/

您的方法有两个问题:

• btn-radio 应该与 AngularJS 表达式一起使用，而不是内插值
• ng-repeat 正在创建一个新的作用域，因此如果您想绑定到在父作用域上定义的值，则需要考虑到这一点

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>

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

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

Thanks!

解决方案

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>

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

There were 2 problems in your approach:

• 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屋！