使用angularjs创建水平单选按钮

Question

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

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

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

Answer 1

角度并没有真正影响这种风格。给它的样式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'}]; 

那么你可以使用重复启动和重复这样结束了：

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

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