<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<div ng-repeat="cmp in components">
<div><h1>{{cmp.sku}} :</h1> {{cmp.children}}</div>
</div>
</body>
</html>
// Code goes here
var app= angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.children = [{
"sku" : "A",
"selected" : true,
"children":[{
"sku" : "A1",
"selected" : true,
"children":[]
},
{
"sku" : "A2",
"selected" : true,
"children":[]
}]
},
{
"sku" : "B",
"selected" : false,
"children":[{
"sku" : "B1",
"selected" : false,
"children":[]
},
{
"sku" : "B2",
"selected" : true,
"children":[]
}]
},
{
"sku" : "C",
"selected" : true,
"children":[{
"sku" : "C1",
"selected" : false,
"children":[]
},
{
"sku" : "C2",
"selected" : false,
"children":[]
}]
},
{
"sku" : "D",
"selected" : false,
"children":[{
"sku" : "D1",
"selected" : false,
"children":[]
},
{
"sku" : "D2",
"selected" : false,
"children":[]
}]
}
]
$scope.components = [];
angular.forEach($scope.children, function(child) {
var grandChildValue = 0;
angular.forEach(child.children, function(grandChild) {
if(grandChild.selected) {
if(grandChildValue != 0) {
angular.forEach($scope.components, function(comp){
if(comp.sku == child.sku) {
comp.children.push(grandChild);
}
})
return;
}
grandChildValue++;
$scope.components.push({
"sku" : child.sku,
"selected": child.selected,
"children":[grandChild]
})
}
})
})
});
/* Styles go here */