CODEWITHSUNDEEP
angularjsradio-buttonundefinedangularjs-ng-repeat
Iris_vdz
Iris_vdz

Reputation: 251

Angularjs ng-repeat radio button list: selected radio returning undefined value

I have found a lot of people with the same question but the answers given don't work for me.

This is my code:

<div ng-controller="addEventController">

//other form input fields that will be sent when clicking the button

   <div ng-controller="imgListCtrl">

      <input ng-repeat-start="image in images" name = "selectImage" type="radio" ng-
      model="img" ng-value="{{image.imageid}}"/>&nbsp;
      <img class="images" ng-src="{{image.url}}" width="50" height="50"/>&nbsp;
      <br ng-if="($index+1) % 10 == 0"/><br ng-if="($index+1) % 10 == 0"/>
      <span ng-repeat-end></span>

   </div>

   <button class="btn-default" ng-click="saveEvent()">Opslaan</button>
</div>

this is a child controller of 'addEventController' and in the parent controller I try to acces the selected radio button value like this:

myAppProfile.controller('addEventController', function($scope,$location, $http) {
    $scope.saveEvent = function() {
        $http({

            method: 'POST', 
            url: 'eventController.php',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: { 
                    'begin': $scope.begin + " " + $scope.btijd,
                    'einde': $scope.einde + " " + $scope.etijd,
                    'beschrijving': $scope.beschrijving,
                    'img': $scope.img
                 }
        }).

        success(function(data, status) {

            if(data == "1"){
                 $location.path("/agenda");
            }else{
                 $scope.errormsg = data;
            }
        }).

        error(function(data, status) {
            $scope.errormsg = data;
        });

    }
});

$scope.img => always returns "undefined".

I have found that you have to rename the ng-model object to $parent.img or that you have to name it images.img, I have tried all the answers I found online, but in my case, always undefined. Anyone have an idea of how I could get the value of the selected radiobutton?

Upvotes: 1

Views: 3745

Answers (2)

SirTophamHatt
SirTophamHatt

Reputation: 1581

Why not defined a scope property on addEventController and hoist the child scope properties?

<div ng-controller="addEventController">

//other form input fields that will be sent when clicking the button

<div ng-controller="imgListCtrl">

  <input ng-repeat-start="image in images" name = "selectImage" type="radio" ng-
  model="event.img" ng-value="{{image.imageid}}"/>&nbsp;
  <img class="images" ng-src="{{image.url}}" width="50" height="50"/>&nbsp;
  <br ng-if="($index+1) % 10 == 0"/><br ng-if="($index+1) % 10 == 0"/>
  <span ng-repeat-end></span>

   </div>

    <button class="btn-default" ng-click="saveEvent()">Opslaan</button>
</div>



myAppProfile.controller('addEventController', function($scope,$location, $http) {

$scope.event = {};

$scope.saveEvent = function() {
    $http({

        method: 'POST', 
        url: 'eventController.php',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: { 
                'begin': $scope.event.begin + " " + $scope.event.btijd,
                'einde': $scope.event.einde + " " + $scope.event.etijd,
                'beschrijving': $scope.event.beschrijving,
                'img': $scope.event.img
             }
    }).

    success(function(data, status) {

        if(data == "1"){
             $location.path("/agenda");
        }else{
             $scope.errormsg = data;
        }
    }).

    error(function(data, status) {
        $scope.errormsg = data;
    });

}

});

Upvotes: 0

Iris_vdz
Iris_vdz

Reputation: 251

Found the answer right after posting, maybe it can help someone. It wasn't enough to do $parent.img because that only goes to the scope of the child controller, but i had to do: ng-model="$parent.$parent.img" to go up to the parent controller..

Upvotes: 3

Related Questions