Using angularjs to create horizontal radio buttons

Question

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?

Jussi Kosunen · Accepted Answer · 2013-09-29 19:56:54Z

6

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

answered Sep 29, 2013 at 19:56

Jussi Kosunen

8,2973 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Juliane Holzt · Accepted Answer · 2013-09-30 00:45:40Z

1

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.net/rWLfZ/

answered Sep 30, 2013 at 0:45

Juliane Holzt

2,14515 silver badges14 bronze badges

Collectives™ on Stack Overflow

Using angularjs to create horizontal radio buttons

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related