AngularJS - radio button not updating model

Question

First steps in AngularJS. I'm facing a strange problem related to this, but the solution doesn't work to me, maybe I'm missing something (as I said, I'm a really n00b with angular).

I'm my HTML, I'm building some radio buttons like that:

<div ng-Controller="PageTwo" >
    <h3>General Information > Knowledge About </h3>
          <div>
        <b>User</b>
        <div>
            <div ng-repeat="option in userOptions">
                <input type="radio" name="userGroups" ng-model="$parent.userSelected" value="{{option.id}}" id="{{option.id}}">{{option.text}}
                        </div>          
            </div>
            Selected thing: {{userSelected}}

        </div>
    </div>

This is my related Controller:

uxctModule.controller ('PageTwo', function ($scope, ModelData){
    $scope.data = ModelData;
    $scope.userOptions = [{text:'Option 1', id:0}, {text:'Option 2', id:1}, {text:'Option 3',id:2},  {text:'Option 4', id:3}];;
    $scope.userSelected = ModelData.knowledgeAboutUser;
});

The model is the following object

uxctModule.factory ("ModelData", function () {
   var data = {
            // more code here
        knowledgeAboutUser : 3,

   }
   return data
});

Now, the problem is that I'm logging in the console the ModelData object, and I've noticed that it's not updating when clicking the radio buttons. I think the binding it's ok: I've tried to change the value in the Model, and the app selects the corresponding radio button.

Any help it's really appreciated, I'm stuck on this for hours

I don't understand why you think that ModelData should be updated when you choose userSelected as model. — a better oliver
– a better oliver, Commented Apr 15, 2014 at 11:24
@zeroflagL I'm obviously missing something, I started studying angular yesterday and looks like I'm doing a mess :( — Sr.Richie
– Sr.Richie, Commented Apr 15, 2014 at 11:26
ModelData is a factory from which you are getting that knowledgeAboutUser value, why do you want to modify that, and whats the purpose of doing that — Nidhish Krishnan
– Nidhish Krishnan, Commented Apr 15, 2014 at 11:28

AlexCV · Accepted Answer · 2014-04-15 11:12:29Z

3

You can remove the intermediate variable $scope.userSelected:

<div ng-repeat="option in userOptions">
    <input type="radio" name="userGroups" ng-model="data.knowledgeAboutUser" value="{{option.id}}" id="{{option.id}}">{{option.text}}         
</div>
Selected thing: {{data.knowledgeAboutUser}}

answered Apr 15, 2014 at 11:12

AlexCV

5165 silver badges4 bronze badges

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

4 Comments

Sr.Richie Over a year ago

thx, it looks like it's working...Now the only issue I have is that it's assigning a String (for knowledgeAboutUser: "2"), instead of a int (knowledgeAboutUser: 2). How can I avoid it?

a better oliver Over a year ago

@Sr.Richie use ng-value instead of value

Sr.Richie Over a year ago

@zeroflagL if I use ng-value the result in ModelData is knowledgeAboutUser: undefined

a better oliver Over a year ago

@Sr.Richie without the curly braces: ng-value="option.id"

Nidhish Krishnan · Accepted Answer · 2014-04-15 11:16:20Z

0

It working fine

just change

$scope.userSelected

to

$scope.userSelected.selected

Working Code

script

var app = angular.module('app', []);

app.factory ("ModelData", function () {
   var data = {
            // more code here
        knowledgeAboutUser : 2,

   }
   return data
});

app.controller("PageTwo", function ($scope, ModelData) {
    $scope.userSelected = {};
    $scope.userOptions = [{text:'Option 1', id:0}, {text:'Option 2', id:1}, {text:'Option 3',id:2},  {text:'Option 4', id:3}];;
    $scope.userSelected.selected = ModelData.knowledgeAboutUser;
});

html

<div ng-app="app" ng-Controller="PageTwo">
     <h3>General Information > Knowledge About </h3>

    <div> <b>User</b>

        <div>
            <div ng-repeat="option in userOptions">
                <input type="radio" name="userGroups" ng-model="userSelected.selected" value="{{option.id}}" id="{{option.id}}">{{option.text}}
             </div>
        </div>
            {{userSelected.selected}}
    </div>
</div>

edited Apr 15, 2014 at 11:16

answered Apr 15, 2014 at 10:31

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

5 Comments

Sr.Richie Over a year ago

Are you sure this is updating the model? Because I'm printing it and it's still displaying knowledgeAboutUser : 3, even after clicking the buttons

Sr.Richie Over a year ago

man thx for your support, but the model keeps not updating :( How are you testing it? Maybe I'm missing something

Nidhish Krishnan Over a year ago

@Sr.Richie when you click the radio button the value within {{userSelected.selected}} is getting updated right.....see the working demo

Sr.Richie Over a year ago

no man, it's updating the $scope.userSelected, but not the corresponding ModelData value. I don't know why

Nidhish Krishnan Over a year ago

ModelData value?? you mean the knowledgeAboutUser inside the ModelData

Collectives™ on Stack Overflow

AngularJS - radio button not updating model

2 Answers 2

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related