Angular - unable to get selected ng-repeated radio button using ng-submit

Question

I might be missing something really simple here - but if I use ng-repeat to create a bunch of radio buttons - I cannot get the selected one using ng-submit.

The controller simply attaches an array of options to the scope.

The markup simply creates a bunch of radio buttons with ng-repeat within a form. It uses ng-submit to capture the submit event. Click 'Run code snippet' below to see the issue.

 angular.module('myApp', [])
    .controller('myController', ['$scope', function($scope) {

      $scope.selectedoption = "";
      $scope.submitCalled = "";

      $scope.options=[];
      $scope.options[0]={id: "option1", name: "option 1"}
      $scope.options[1]={id: "option2", name: "option 2"}
      $scope.options[2]={id: "option3", name: "option 3"}
      $scope.options[3]={id: "option4", name: "option 4"}

      $scope.submitForm = function() {       
        console.log($scope.selectedoption);              
        $scope.submitCalled = "submit called " + $scope.selectedoption;
      };
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">

<form ng-submit="submitForm()" ng-controller="myController">    
    <div ng-repeat="option in options">
      <input type="radio" name="option" ng-value="option.id" ng-model="selectedoption">
      <label for="radio">{{option.name}}</label>
    </div>     

    <h2>{{selectedoption}}</h2>
    <h2>{{submitCalled}}</h2>

    <input type="submit" id="submit" value="Submit" />  
</form>
</div>

check this out stackoverflow.com/questions/16970248/…

Dmitri Algazin
– Dmitri Algazin

2015-06-04 12:27:36 +00:00
Commented Jun 4, 2015 at 12:27 — Dmitri Algazin
– Dmitri Algazin, Commented Jun 4, 2015 at 12:27
ok thanks @DmitriAlgazin - but pankajparkar has the answer.

Donal
– Donal

2015-06-04 12:29:15 +00:00
Commented Jun 4, 2015 at 12:29 — Donal
– Donal, Commented Jun 4, 2015 at 12:29

Community · Accepted Answer · 2017-05-23 12:21:55Z

2

You ng-repeat div should be using ng-model="$parent.selectedoption"

Reason

ng-repeat creates a new child scope every time, as you are declaring new ng-model inside ng-repeat will be added into the ng-repeat scope(child), this child scope has been created on each iteration by ng-repeat. As you want to create a scope variable to the parent scope, so you need to use $parent variable that will point the parent scope.

<div ng-repeat="option in options">
  <input type="radio" name="option" ng-value="option.id" ng-model="$parent.selectedoption">
  <label for="radio">{{option.name}}</label>
</div>

Demo Fiddle

Update

Other good way to avoid this sort of $parent annotation is by using object annotation, that will do follow the scope prototypal inheritance. Only thing you need to do is define one scope variable in your controller like $scope.selected = { option: '' } then while using it on html you could refer it as selected.option directly no need to use $parent for parent scope reference.

Demo Fiddle

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jun 4, 2015 at 12:24

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

Pankaj Parkar Over a year ago

@Donal yes,,I'm updating my answer

Donal Over a year ago

ok, thanks - unfortunately I can only upvote once - but I am sure others will.

Donal Over a year ago

ok, thanks. I have updated the fiddle with the second one here: jsfiddle.net/4hkw8h43/5

Pankaj Parkar Over a year ago

@Donal Thanks for 2nd fiddle..I didn't get time to do it.. Happy Coding :)

Collectives™ on Stack Overflow

Angular - unable to get selected ng-repeated radio button using ng-submit

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related