从angularjs中获取嵌套json的父值和子值

问题描述：

我对angularjs非常陌生，所以我正面临着这个问题，我有一个嵌套的json，并且使用父值作为头并且值孩子作为复选框。现在，当我想要检索已勾选的复选框的值时，我想以格式{parent_name：child_name}存储在数组中。从angularjs中获取嵌套json的父值和子值

我正在使用以下取自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}在一个数组中，但我找不到一种方法来实现这一点。

编辑：我忘了提及另一个重要的一点，一些复选框将被预先选定。根据数据，杰克和金的复选框将在加载时打勾。我必须获取预选值的值以及任何新检查的复选框。

我Plunker代码here.

我希望我的问题是清楚的。提前致谢！

答

提出的解决方案修改原来的JSON对象。
如果由于某些原因，您必须保留原始JSON对象，您应该复制它并将其存储在控制器作用域中（Angular具有这样的功能）。这个想法是在原始JSON对象中添加一个isChecked属性，默认情况下这些属性值为false，当选中该复选框时将设置为true，或者在未选中该复选框时设置为false。这可以通过使用ng-model指令，在这里绑定一个html输入到JS端的变量。

这里是蹦床： http://plnkr.co/edit/EzDp3mMtlnH3t4bIz8e6?p=preview与Angular js 1.5。

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="[email protected]" 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>

非常感谢您的帮助，但我错过了提及一个非常重要的观点，请看看我重新编辑的问题。 –

只需为所需的孩子设置'isChecked'属性为'true'即可。您可以使用具有函数的原始JSON对象执行此操作，或者使用已设置值的JSON对象执行此操作。我直接修改了JSON以加快速度。我更新了我的答案和plunkr – davidxxx

我已将所有孩子的'isChecked'属性设置为它们各自的值，然后尝试执行您的代码，但无法使其工作。它给我所有复选框的值，而不管选择是否完成。这里是plunker [code。]（http://plnkr.co/edit/9CvqqC8zPgm9DVvX5VPS?p=preview） –

答

使用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不是在开始时所定义，这将是falsy这样的复选框将不被检查。您可以通过将其设置为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中获取嵌套json的父值和子值

相关推荐