Question

我对angularjs非常陌生，所以我面对这个问题，我有一个嵌套的json，我使用父值作为标题，子项的值作为复选框。现在，当我想要检索已经勾选的复选框的值时，我希望它以格式{ parent_name：child_name }存储在数组中。

我使用了从this主题获取的以下示例数据。

数据：

parents : [{
    name: 'George',
    age: 44,
    children: [{
        name: 'Jack',
        age: 16, 
        isChecked: 'true'
    },{
        name: 'Amy',
        age: 13, 
        isChecked: 'false'
    }]
}, {
    name: 'Jimmy',
    age: 38,
    children: [{
        name: 'Max',
        age: 7, 
        isChecked: 'false'              
    },{
        name: 'Lily',
        age: 5, 
        isChecked: 'false'
    },{
        name: 'Kim',
        age: 4, 
        isChecked: 'true'
    }]
}]

而且，我目前的输出 looks like this

我的HTML代码是

<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
  <div class="form-group">
  <label>{{parent.name}}</label>
  <div class="input-group" ng-repeat="child in parent.children">
    <label><input type="checkbox" ng-checked="child.isChecked=='true'"> {{child.name}}</label>
  </div>
  <hr>
</div>

现在，在参考图片时，我想在数组中包含 {George：Jack} 和 {Jimmy：Kim} ，但我可以＆＃39;找到实现目标的方法。

编辑：我忘了提到另一个重点，一些复选框将被预先选中。根据数据，Jack和Kim的复选框已经被加载。我必须获取预先选择的值的值以及任何新选中的复选框。

我的Plunker代码为here.

我希望我的问题很明确。提前谢谢！

Answer 1

建议的解决方案会修改您的原始JSON对象。
如果由于某些原因，您必须保留原始JSON对象，则应该对其进行复制并将其存储在控制器范围内（Angular具有执行此操作的功能）。我们的想法是在原始JSON对象中添加isChecked属性，默认情况下该值为false，选中该复选框时将设置为true;如果取消选中该复选框，则设置为false。这可以通过使用ng-model指令来实现，该指令将html输入绑定到JS端的变量。

以下是plunker： http://plnkr.co/edit/EzDp3mMtlnH3t4bIz8e6?p=preview使用Angular js 1.5。

js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';


  $scope.parents = [{
    name: 'George',
    age: 44,
    children: [{
        name: 'Jack',
        age: 16,
        isChecked: true;
    },{
        name: 'Amy',
        age: 13
    }]
}, {
    name: 'Jimmy',
    age: 38,
    children: [{
        name: 'Max',
        age: 7              
    },{
        name: 'Lily',
        age: 5
    },{
        name: 'Kim',
        age: 4,
        isChecked: true;
    }]
}]


$scope.submit= function(){

   var results = [];
   for (var i=0; i< $scope.parents.length; i++){

      var parent = $scope.parents[i];
        for (var j=0; j< parent.children.length; j++){

            var child =  parent.children[j];

            if (child.isChecked){
                results.push(parent.name +":"+ child.name);
            }
        }
   }

   //display info
   for ( i=0; i< results.length; i++){
    console.log(results[i]) ;
   }

}

});

<强> HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

   <div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
     <div class="form-group">
       <label>{{parent.name}}</label>
       <div class="input-group" ng-repeat="child in parent.children">
          <label><input type="checkbox" ng-checked="child.isChecked=='true'" ng-model="child.isChecked">  
           {{child.name}}</label>
      </div>
      <hr>
    </div>
  </div>
   <button type="button" ng-click="submit()" class="btn btn-success width-80px">Submit</button>

  </body>

</html>

Answer 2

使用ngChecked指令，如果表达式（此处child.checked=='true'）真实，则只能将复选框标记为已选中。但是，它不会影响变量child.checked的值。

我建议您使用ngModel指令，该指令会将复选框的值与child.checked（或任何其他变量）绑定。

<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
  <div class="form-group">
    <label>{{parent.name}}</label>
  <div class="input-group" ng-repeat="child in parent.children">
    <label>
      <input type="checkbox" ng-model="child.checked">{{child.name}}
    </label>
  </div>
  <hr>
</div>

由于child.checked未在开头定义，因此它将是假的，因此不会检查复选框。您可以通过将其设置为true来更改此行为。

然后，要创建结果数组，您可以执行以下操作：

var results = [];
parents.forEach(function (parent) {
  parent.children.forEach(function (child) {
    if (child.checked) {
      var couple = {};
      couple[parent.name] = child.name;
      results.push(couple);
    }
  });
});

从angularjs

2 个答案: