Error in retrieving value of dynamic ng-model

Question

I am working on a form having multiple radio button listings in which I will need to create dynamic ng-model for each of the radio button. I am being able to do that, but when same I am trying to retrieve in controller (USING the ng-model iteration with angular forEach loop) it seems model cannot be replicated with console.log. Anyone help?

HTML

<html>

<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

<p ng-repeat="x in dummy">
    <input type="radio" name="{{x.name}}" id="{{x.id}}" ng-model="Ques[x.id]"><span>{{x.value}}</span>
</p>
<button ng-click="ok()">Click</button> 

<script>
//module declaration
var app = angular.module("myApp",[]);

//controller
app.controller("myCtrl", function($scope){
    $scope.dummy = [
        {name:"name1",value:"red",id:"id1"},
        {name:"name2",value:"blue",id:"id2"},
        {name:"name3",value:"yellow",id:"id3"},
    ];

    $scope.ok = function(){

        angular.forEach($scope.dummy, function(val, key) {
            console.log($scope.Ques.val.id);
        });
    }

});
</script>

</head> 

</html>

Yep, it worked. But, I had to make a change >>>> console.log($scope.Ques[val.id]); — Deadpool, Aug 07 '16 at 15:53
The title of this question and the text introducing it indicates the core issue is with outputting the object to the console.log, and not the structure of the radio buttons (of course there are issues there too). Peterson, could you please clarify what the root problem is that you're having here? — Graham, Aug 08 '16 at 05:08

score 2 · Answer 1 · answered Aug 07 '16 at 15:53

The Angular model is a JavaScript object itself. Instead of looping through the object, you can output the entire object to the console like this:

console.log( JSON.stringify($scope.dummy) );

To make it more easy to read and span multiple lines for complex objects, just add these arguments to stringify:

console.log( JSON.stringify($scope.dummy, null, 2) );

It also looks like you need a little work on how you handle the Radio buttons, I'll leave that to the excellent odetocode blog/site:

http://odetocode.com/blogs/scott/archive/2013/06/25/radio-buttons-with-angularjs.aspx

score 2 · Answer 2 · edited May 23 '17 at 12:01

The main problem is that you're inside ngRepeat and it creates a child $scope, so to make it work, you should use or the Dot Rule or controller-as-syntax, as below:

$scope.model = {};

Then in your view:

<label>
  <input type="radio" id="{{x.id}}" value="{{x.value}}" ng-model="model.Ques[x.id]">{{x.value}}
</label>

See it working:

(function() {
  'use strict';

  angular
    .module('myApp', [])
    .controller("myCtrl", function($scope) {
      $scope.dummy = [  
         {  
            "name":"name1",
            "value":"red",
            "id":"id1"
         },
         {  
            "name":"name2",
            "value":"blue",
            "id":"id2"
         },
         {  
            "name":"name3",
            "value":"yellow",
            "id":"id3"
         }
      ];
      $scope.model = {};

      $scope.ok = function() {
        // With your original code:
        angular.forEach($scope.dummy, function(val, key) {
          console.log($scope.model.Ques[val.id]); // <- note the syntax
        });
 
        // Or you can get all key / values stored in radio buttons:
        /*for (var key in $scope.model.Ques) {
          console.log('Key => ', key);
          console.log('Value => ', $scope.model.Ques[key]);
        }*/
      }
    });
})();

<!doctype html>
<html lang="en">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <p ng-repeat="x in dummy">
    <label>
      <input type="radio" value="{{x.value}}" id="{{x.id}}" ng-model="model.Ques[x.id]">{{x.value}}
    </label>
  </p>
  <button ng-click="ok()">Click</button>
</body>

</html>

For reference, check the @PankajParkar's answer.

score 1 · Accepted Answer · answered Aug 07 '16 at 16:24

Have a look at that.

<body ng-app="myApp" ng-controller="myCtrl"> 

<p ng-repeat="x in dummy">
    <input type="checkbox" name="{{x.name}}" id="{{x.id}}" ng-model="Ques[x.id]" />
<label>{{x.name}}</label>
</p>

<button ng-click="ok()">Click</button> 

<script>
//module declaration
var app = angular.module("myApp",[]);

//controller
app.controller("myCtrl", function($scope){
$scope.dummy = [
    {name:"name1",value:"red",id:"id1"},
    {name:"name2",value:"blue",id:"id2"},
    {name:"name3",value:"yellow",id:"id3"},
];
    $scope.Ques = {};
$scope.ok = function(){
    angular.forEach($scope.dummy, function(val, key) {
        console.log($scope.Ques[val.id]);
    });
}

});

Error in retrieving value of dynamic ng-model

3 Answers3