使用angularjs创建水平单选按钮

Question

我正在使用ngRepeat指令构建一组单选按钮，我需要将其设置为水平。我不确定用ngRepeat可以做到这一点，因为每个实例都有自己的范围。下面的结构为options数组中的每个项创建一个新div，它们是垂直显示的。

<div ng-repeat="option in options">
    <input type="radio" role="radio" />
    <span>label</span>
</div>

有没有人知道创建水平单选按钮的技巧？

Answer 1

Angular并不会以这种方式影响风格。以你的风格为你的div float:left或display:inline-block。

Answer 2

应该注意的是，从版本1.1.6开始的AngularJS允许人们更干净地做到这一点：

假设

$scope.data = [{val:0,txt:'Foo'},{val:1,txt:'Bar'},{val:2,txt:'Baz'}];

然后你可以像这样使用repeat-start和repeat-end：

<input ng-repeat-start="item in data" type="radio" value="{{item.val}}">
<span ng-repeat-end>{{item.txt}}</span>

在这里演示：http://jsfiddle.net/rWLfZ/