Angular and radio input not working with ng-model

Question

So I have an Angular project with the following in my directive template

<div ng-repeat="poll in polls">
  <div ng-repeat="choice in poll.choices">
    <input type="radio" name="choice" ng-model="userVote" ng-value="choice.text">
                                {{choice.text}}
    <button ng-click="vote(userVote)">Vote!</button>
  </div>
</div>

And my controller has the following...

 $scope.vote = function(userVote){
  alert(userVote);
 }

But the alert says undefined, despite the {{choice.text}} showing up properly. There are no JS errors and the other functions in the controller work as expected.

There is no problem with your code. Can you try to reproduce it in a fiddle? — Blackhole
– Blackhole, Commented Aug 2, 2014 at 16:08
Could be cause I was using a partial from a directive? If so I may need to add that info as well. — Jackie
– Jackie, Commented Aug 2, 2014 at 16:37
Nope had nothing to do with directives just a Angular Gotcha! — Jackie
– Jackie, Commented Aug 2, 2014 at 16:49

Jackie · Accepted Answer · 2014-08-02 16:49:38Z

1

Problem was related to ng-repeat creating its own scope. This does work as expected...

<input type="radio" name="choice" ng-model="$parent.userVote" ng-value="choice.text">

However, I have also read that the $parent scope is bad practice so I am still researching and the check is still open.

(hope this works)

Simple Example Failing

Simple Example Passing

edited Aug 2, 2014 at 16:49

answered Aug 2, 2014 at 16:14

Jackie

24k43 gold badges178 silver badges340 bronze badges

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

1 Comment

Jesus is Lord Over a year ago

Your links weren't working when I clicked them, but I think maybe the site is having issues since I couldn't create a new Angular plunk.

Jesus is Lord · Accepted Answer · 2014-08-02 17:03:21Z

1

The only thing I know to do when you need to "set" inside an ng-repeat (or any directive that creates a new scope) is to, in your controller at the top, do something like:

$scope.model = {};

And then every ng-model that is inside a new scope should have model. in front of it. This will make it so you don't have to use $parent. This has the advantage of, should you add something like ng-if somewhere you don't have to do things like $parent.$parent.

I suppose if you're using a newer version of angular there's also getters and setters you can use with ng-model-options.

answered Aug 2, 2014 at 17:03

Jesus is Lord

15.4k11 gold badges71 silver badges103 bronze badges

1 Comment

Jackie Over a year ago

Great idea! I will add this.

Collectives™ on Stack Overflow

Angular and radio input not working with ng-model

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related