AngularJS ng-repeat with multiple radio inputs

Question

I've got small problem with ng-repeat on persons with multiple radio inputs (yes/no). Input names should be different because of name="person.name" but it behaves like they all are the same. Somebody knows how to fix this?

http://jsfiddle.net/Chotkos/EbU8g/

HTML:

<form name="myForm" ng-controller="MyCtrl">
    <p>Decisions</p>
    <ul>
        <li ng-repeat="person in people">
            <label>{{person.name}}
                <input type="radio" ng-model="person.decision" name="person.name" value="Yes" />
                <input type="radio" ng-model="person.decision" name="person.name" value="No" />
            </label>
        </li>
    </ul>
</form>

JS:

function MyCtrl($scope) {
    $scope.people = [{
        name: "John"
    }, {
        name: "Paul"
    }, {
        name: "George"
    }, {
        name: "Ringo"
    }];
}

For more information about when to use curly braces in angular, refer to stackoverflow.com/questions/17878560/… — Jorge Zuverza
– Jorge Zuverza, Commented Jul 15, 2014 at 16:20

S McCrohan · Accepted Answer · 2014-07-15 16:18:15Z

6

You need to use {{ person.name }}, rather than "person.name" in that context.

answered Jul 15, 2014 at 16:18

S McCrohan

6,7011 gold badge33 silver badges39 bronze badges

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

1 Comment

Joao Polo Over a year ago

and, you can use the $index variable, as name="person{{$index}}", to avoid repeated values in person.name

Ronnie · Accepted Answer · 2014-07-15 16:18:52Z

2

I don't know why you got downvoted. Your question was fine. So you are using the name property which is traditional in an HTML form. Since name isn't part of angular, you need to wrap the person.name in curly brackets name="{{person.name}}" so angular knows to parse it.

answered Jul 15, 2014 at 16:18

Ronnie

11.2k22 gold badges85 silver badges144 bronze badges

Comments

sylwester · Accepted Answer · 2014-07-15 16:28:16Z

0

Please see here: http://jsfiddle.net/Chotkos/EbU8g/ that happend because you wrapped all inputs into label tag

  <form name="myForm" ng-controller="MyCtrl">
        <p>Decisions</p>
        <ul>
            <li ng-repeat="person in people">
                <label>{{person.name}}</label>
                <input type="radio" ng-model="person.decision" name="person.name" value="Yes" />
                <input type="radio" ng-model="person.decision" name="person.name" value="No" />
            </li>
        </ul>
    </form>

answered Jul 15, 2014 at 16:28

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-repeat with multiple radio inputs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related