I am building a set of radio buttons using the ngRepeat directive and I need to make it horizontal. I'm not sure it's possible to do that with ngRepeat, since each instance gets its own scope. The below structure creates a new div for each item in the options array and they're displayed vertically.

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

Does anyone know any tricks for creating horizontal radio buttons?

I am building a set of radio buttons using the ngRepeat directive and I need to make it horizontal. I'm not sure it's possible to do that with ngRepeat, since each instance gets its own scope. The below structure creates a new div for each item in the options array and they're displayed vertically.

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

Does anyone know any tricks for creating horizontal radio buttons?

• javascript
• html
• angularjs

2 Answers 2

Angular doesn't really affect style in this way. Give your div float:left or display:inline-block in its style.

It should be noted that AngularJS from version 1.1.6 up allows one to do this much more cleanly:

Assume

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

then you can use repeat-start and repeat-end like this:

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

Demo here: http://jsfiddle/rWLfZ/