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?

/

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"
    }];
}

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/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"
    }];
}

• javascript
• angularjs
• forms
• radio-button
• angularjs-ng-repeat

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

3 Answers 3

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

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.

Please see here: http://jsfiddle/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>