Binding with radio's not working in Angular

Question

Using ng-repeat I display some radio's in the edit form:

<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
    <input type="radio" name="gender"  value="{{gender.Id}}" data-ng-model="customerFormData.customer.Gender.Id" />{{gender.Description}}
</label>

As you can see, I've applied the 'dot practice'. The edit form is a pop-up over my detail form. In my detail form I have this:

<tr>
    <td>Gender:</td>
    <td>{{ customer.Gender.Description }} </td>
</tr>

All my bindings in the edit form are working, but I can't get the gender binding to work. I think it has something to do with scope inheriting by the use of ng-repeat.

I've also tried to use $parent, but the outcome remains the same:

<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
    <input type="radio" name="gender"  value="{{gender.Id}}" data-ng-model="$parent.customerFormData.customer.Gender.Id" />{{gender.Description}}
</label>

Setting the initial value works. When a female is set, the female radio is selected and when it is a male, the male radio is selected.

A second problem is (and I think it has to do with the binding), is that when Male is selected, I have to click twice on female to get female selected.

Edit: I've created a Fiddle to illustrate my issue.

Could you prepare a plunker of the code?

callmekatootie
– callmekatootie

2013-06-20 08:27:41 +00:00
Commented Jun 20, 2013 at 8:27 — callmekatootie
– callmekatootie, Commented Jun 20, 2013 at 8:27
@callmekatootie I've added a fiddle. See my updated post

Martijn
– Martijn

2013-06-20 08:34:50 +00:00
Commented Jun 20, 2013 at 8:34 — Martijn
– Martijn, Commented Jun 20, 2013 at 8:34

Narretz · Accepted Answer · 2013-06-20 09:27:55Z

8

One solution is to use ng-value(which evaluates its content as an expression) and set it to the whole gender object, and set ng-model to the Gender object on your FormData. This way, when you change the input, the gender object is set to FormData.Gender and you have access to both Id and Descr.

<label ng-repeat="gender in genders">    
  <input type="radio" name="gender" ng-value="gender" ng-model="customer.FormData.Gender">
  {{gender.Descr}}
</label>

http://jsfiddle.net/ADukg/3194/

If you just want the Id in the model, you can use: (value evaluates its content as a string)

<label ng-repeat="gender in genders">
  <input type="radio" name="gender" value="{{gender.Id}}" ng-model="customer.FormData.Gender.Id">
  {{gender.Descr}}
</label>

And in the controller:

$scope.customer.FormData.Gender = {Id : $scope.genders[1].Id};

http://jsfiddle.net/ADukg/3195/

Strangely enough, it doesn't work when you set value and model to Id, but initially bind a whole gender object to the gender model. Weird!

edited Jun 20, 2013 at 9:27

answered Jun 20, 2013 at 9:08

Narretz

4,9831 gold badge35 silver badges40 bronze badges

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

3 Comments

Martijn Over a year ago

Thanks a lot. I like this approach. Could you explain why ng-value is working while value doesn't? And how doe you know about ng-value? It isn't mentioned in the documentation..(weird?).

Narretz Over a year ago

yeah, it's missing, the first comment on the docs page talks about it. ng-value evaluates its content as an expression, value just takes it as a string.

Martijn Over a year ago

Thank for the second fiddle, but I like the first one more. Thanks for the info!

DanEEStar · Accepted Answer · 2013-06-20 09:05:11Z

2

I can't explain it 100% accurately. But you have too many nested objects in your scope!

Look at this example (fiddle: http://jsfiddle.net/ADukg/3193/)

<div ng-controller="MyCtrl">
    <label ng-repeat="gender in genders">
        <input type="radio" name="gender" value="{{ gender.Id }}" ng-model="$parent.selectedGenderId">{{gender.Descr}}
    </label>
</div>

function MyCtrl($scope) {
    $scope.genders = [{Id: 1, Descr:'Male'}, {Id:2, Descr:'Female'}];
    $scope.selectedGenderId = $scope.genders[1].Id;

    $scope.$watch('selectedGenderId', function(newValue, oldValue) {
        console.log("selectedGenderId=" + newValue);
        // TODO: set it into FormData?
    });
}

If you set the "selectedGenderId" directly it will also be set correctly.

I think the selection problem has nothing to do with the binding directly but with the scope and nesting of scopes via the many objects.

Take also look at this explanation: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

answered Jun 20, 2013 at 9:05

DanEEStar

6,3707 gold badges41 silver badges53 bronze badges

1 Comment

Martijn Over a year ago

Thanks for the reply and the link to the article. I've chosen however for Narretz solution, because I think this is cleaner.

callmekatootie · Accepted Answer · 2013-06-20 09:27:24Z

1

The problem lies with the binding on the radio buttons. You are binding on the customer.FormData.Gender.id model - note it is the id property that you bind to and not the Gender property.

Thus, when you select the radio button for Male, only the ID on the gender is changed - not the Descr field. This explains clearly the behaviour. When you select different radio buttons, notice how only the ID gets updated and not the Desc.

To change the Descr field as well, you will be wise to have a dedicated model for the radio buttons and then respond to changes to this model.

This is demonstrated in this fiddle.

answered Jun 20, 2013 at 9:27

callmekatootie

11.2k16 gold badges74 silver badges109 bronze badges

1 Comment

Martijn Over a year ago

Thans for the explanation, but the first fiddle (jsfiddle.net/XF425) is still broken. When you check Male, it works, but.. when you click Female again, nothing happens. The value is updated only at the first click, then it is broken. Can you explain why that is?

Collectives™ on Stack Overflow

Binding with radio's not working in Angular

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related