Je travaille sur un formulaire comportant plusieurs listes de boutons radio dans lesquels je devrai créer un modèle ng dynamique pour chacun des boutons radio. Je suis en mesure de le faire, mais quand même j'essaie de récupérer dans le contrôleur (en utilisant l'itération ng-model avec la boucle angulaire forEach), il semble que le modèle ne peut pas être répliqué avec console.log. Quelqu'un vous aide?

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> 
2
Deadpool 7 août 2016 à 18:42

3 réponses

Meilleure réponse

Jetez un oeil à cela.

<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]);
    });
}

});
1
Mahfuz 7 août 2016 à 16:24

Le modèle angulaire est un objet JavaScript lui-même. Au lieu de parcourir l'objet en boucle, vous pouvez sortir l'objet entier vers la console comme ceci:

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

Pour le rendre plus facile à lire et à s'étendre sur plusieurs lignes pour des objets complexes, ajoutez simplement ces arguments à stringifier:

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

Il semble également que vous ayez besoin d'un peu de travail sur la façon dont vous gérez les boutons radio, je laisse cela à l'excellent blog / site odetocode:

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

2
Graham 7 août 2016 à 15:53

Le problème principal est que vous êtes à l'intérieur de ngRepeat et que cela crée un enfant $scope, donc pour le faire fonctionner, vous devez utiliser ou le Dot Rule ou { {X3}}, comme ci-dessous:

$scope.model = {};

Ensuite, dans votre vue :

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

Voyez travailler :

(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>

Pour référence, consultez le

Community 23 mai 2017 à 12:01