AngularJS - Setting value of radio button built using ng-repeat

Question

Here's the HTML :

<div>
    <ul>
        <li ng-repeat="answer in answers">
            <input type="radio" ng-model="$parent.selectedAnswer" name="answerText" value="{{answer.answerID}}"/>
            <label>{{answer.answerText}}            
            </label>
        </li>
    </ul>
</div>

The need is to store the selected answer into LocalStorage and whenever the question shows up again, mark the radio button corresponding to that answer. I'm able to store it in LocalStorage, retrieve it, but when I update the model, it doesn't select the radio button on the UI.

In my controller, I'm simply calling -

$scope.selectedAnswer = value.answerID;

where value points to the answer stored in the LocalStorage. Please help.

EDIT:

A little more detail :

I'm managing the entire quiz page using a single route and controller. When one question is done, I fetch the next question and its corresponding answers. While populating the answers array in the controller ($scope.answers), I'm checking to match their IDs with the answer stored in the LocalStorage. Between each question, the answers array is emptied and populated again.

It looks like you're using a child and a parent controller. Can you show just enough of the enough to cover both the child and the parent controller? Also, which controller are you setting $scope.selectedAnswer = value.answerID? — restassured
– restassured, Commented Feb 10, 2015 at 23:15
Nopes. There are no child/parent controllers, just one controller assigned to the partial. The reason you see $parent$ in ng-model is because ng-repeat creates it's own $scope. — Kazekage Gaara
– Kazekage Gaara, Commented Feb 10, 2015 at 23:18
When you say "LocalStorage" do you mean in the JavaScript ? or in this case the $scope? — njfife
– njfife, Commented Feb 10, 2015 at 23:28

njfife · Accepted Answer · 2015-02-11 17:09:51Z

2

So you should be using ng-value to do this since it is an angular expression and not a text value. Using just value as you did worked in Plnkr but I know that sometimes it does not.

Also in general I have found that using the ng-controller="<ControllerName> as <ThisRef>" works a lot better in most cases. There are times when you still need the $scope variable (Like for form validation) but normally I have fewer scoping issues when using the controllers "this" variable over the $scope.

I made an example using the method I described:

http://plnkr.co/edit/XV3we6SDmmLmUGSwdVVT?p=preview

If your question has to do with HTML 5 Local Storage let me know, I wasn't sure

EDIT: Alternatively you can try using $scope.$apply(); to accomplish this. If the scope is not in sync with the view then apply should fix that.

Here is another plnkr showing how I would generally do something like that. Note that the $apply is 100% not needed in that example but likely is needed in yours.

Here is my example:

    $scope.updateModel = function(value) {
      $timeout(function() {
        $scope.$apply(function() {
          $scope.selectedAnswer = value;
        });
      });
    };

Notice I am using $timeout to make sure it doesn't happen while there is a digest in progress.

http://plnkr.co/edit/O7CBfTiWPrsbthFKlAOZ?p=preview

I hope this edit helps =)

edited Feb 11, 2015 at 17:09

answered Feb 10, 2015 at 23:32

njfife

3,5751 gold badge24 silver badges32 bronze badges

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

13 Comments

restassured Over a year ago

You're right. I was about to suggest the ControllerAs syntax next, but you beat me to it.

Kazekage Gaara Over a year ago

I tried ng-value too, doesn't work. And yes, my question is regarding HTML5 LocalStorage but I don't think that should be a problem, as I'm just storing the answer IDs and retrieving them.

njfife Over a year ago

So is my plunkr not accomplishing what you are trying to do? Maybe I am not understanding the question

Kazekage Gaara Over a year ago

Your plunkr works fine, but doesn't work for my scenario. I should probably edit the question to add more details.

njfife Over a year ago

Yeah I would need more code, if you look in the debugger and check the value of 'value' when the function that sets '$scope.selectedAnswer' does it contain the data you are expecting? If not then the issue is not angular related

|

restassured · Accepted Answer · 2015-02-10 23:32:02Z

-1

Since you only have one controller, you don't need to specify $parent.

<div>
    <ul>
        <li ng-repeat="answer in answers">
            <input type="radio" ng-model="selectedAnswer" name="answerText" value="{{answer.answerID}}"/>
            <label>{{answer.answerText}}            
            </label>
        </li>
    </ul>
</div>

answered Feb 10, 2015 at 23:32

restassured

1,0182 gold badges9 silver badges12 bronze badges

2 Comments

njfife Over a year ago

Yes you do, sorry, but this is not right, ng-repeat has it's own scope your method will not yield the expected result

njfife Over a year ago

He is a plnkr showing that is not right: plnkr.co/edit/BCaualli3sMJeM1YVdjF?p=preview You really do WANT it to work that way, it makes ng-repeat much more useful

Collectives™ on Stack Overflow

AngularJS - Setting value of radio button built using ng-repeat

2 Answers 2

13 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related