CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Alex Garulli
Alex Garulli

Reputation: 757

AngularJS ng-model data from radio button

I have a short form in AngularJS . I use ng-repeat to show genders and validate their radio buttons The problem is that I want to get the value of the radio button selected and print this out using ng-model. How can achieve this?

Here Plunker

Upvotes: 5

Views: 4611

Answers (2)

Dieter De Mesmaeker
Dieter De Mesmaeker

Reputation: 2156

The solution by Mike Robinson is the most elegant. However, a quick fix is to add $parent:

            <input type="radio" ng-model="$parent.selectedGender" name="radiob" id="{{g.id}}" value="{{g.id}}" required />{{g.name}}

This will change the selectGender in the parent scope of the ng-repeat.

http://plnkr.co/edit/M5cos7xFBA9a0eRWhHi9?p=info

Upvotes: 1

Mike Robinson
Mike Robinson

Reputation: 25159

The problem is you're binding selected gender, a primitive value, to your $scope. When you use ng-repeat it creates a new scope and inherits the values from it's parent. Unfortunately, because your values are primitive (a number), they are passed by value instead of reference, so you only get one way binding. This is why it's always recommended to store values on an object in scope instead of directly.

Here's a link to a working controller: http://plnkr.co/edit/Y7sTEaYMx0aD4fPDHAMA?p=preview

I added this, and adjusted the rest of the code accordingly:

$scope.user = {
    selectedGender: 'none'
}

Upvotes: 8

Related Questions