Fetching parent and child value from a nested json in angularjs -
i'm new angularjs i'm facing issue have nested json, , using parent value header , values of child checkboxes. now, when want retrieve value of checkboxes have been ticked, want in format of {parent_name:child_name} stored in array.
i'm using following sample data taken this thread.
data:
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' }] }] and, current output looks this
my html code is
<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> now, in reference image, want have {george:jack} , {jimmy:kim} in array, can't find way achieve that.
edit : forgot mention important point, checkboxes pre-selected. per data, checkbox jack , kim ticked on-load. have fetch value pre-selected values newly checked checkboxes.
my plunker code here.
i hope question clear. in advance!
the proposed solution modifies original json object.
if reasons, have keep original json object, should copy of , store in controller scope (angular has functions it). idea add ischecked attribute in original json object values false default , set true when checkbox selected or false when checkbox unselected. possible using ng-model directive binds here html input variable in js side.
here 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 = []; (var i=0; i< $scope.parents.length; i++){ var parent = $scope.parents[i]; (var j=0; j< parent.children.length; j++){ var child = parent.children[j]; if (child.ischecked){ results.push(parent.name +":"+ child.name); } } } //display info ( 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>
Comments
Post a Comment