Question

我正在处理一个包含多个单选按钮列表的表单，我需要为每个单选按钮创建动态ng-model 。我能够做到这一点，但是当我尝试在控制器中检索时（使用带有角度forEach循环的ng模型迭代），似乎模型无法使用console.log进行复制。有人帮吗？

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>

Answer 1

Angular模型本身就是一个JavaScript对象。您可以将整个对象输出到控制台，而不是循环遍历对象：

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

为了使复杂对象更容易阅读和跨越多行，只需将这些参数添加到stringify：

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

看起来你需要做一些关于如何处理单选按钮的工作，我将把它留给优秀的odetocode博客/网站：

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

Answer 2

主要问题是你在ngRepeat内并且它创建了一个孩子 $scope，所以要使它工作，你应该使用或{{1} }或Dot Rule，如下所示：

controller-as-syntax

然后在视图：

中

$scope.model = {};

查看工作：

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

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

作为参考，请查看@ PankajParkar的answer。

Answer 3

看看那个。

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

});

检索动态ng-model

3 个答案: