Folks- I have a data structure of nested parent-child structure. The first level (parents) drives angular to create a row of buttons. Selecting one of these buttons populates a list with the second level (children). Now I also need that selection to drive a third level (grandchildren). That third div needs to have all the grandchildren of the children.
As I'm relatively new to angular, I'm afraid I'm looking at it too procedurally.
Code follows:
<html ng-app="KPI_Scorecard">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!--script src="js/controllers.js"></script-->
<script>
var $j = jQuery.noConflict();
var KPI_Scorecard = angular.module('KPI_Scorecard', []);
var listL2;
var myChildren;
var myChildrenChildren = []
KPI_Scorecard.controller('KPIListCtrl', function ($scope) {
$scope.showL2Content = function(whatChildren) {
$scope.myChildren = whatChildren;
$scope.myChildrenChildren;
for (x=0;x<$scope.myChildren.length;x++) {
myChildrenChildren = [];
for (y=0;y<$scope.myChildren[x].children.length;y++) {
myChildrenChildren.push($scope.myChildren[x].children[y]);
}
//console.log(myChildrenChildren);
};
console.log(myChildrenChildren.length);
};
$scope.showL3Content = function(whatChildren) {
//console.log(whatChildren);
};
$scope.myList = [{"id":"Jack","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Margin","goalWeight":"0.5","goalColor":"11.7"},{"goalName":"Expense","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Chuck","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Expense","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"David","employeeLevel":"3","managerName":"Chuck","l1Mgr":"Jack","l2Mgr":"Chuck","goals":[{"goalName":"budget","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Scott","employeeLevel":"3","managerName":"Chuck","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Investment","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Jill","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}]},{"id":"Rick","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"technology","goalWeight":"1","goalColor":"NULL"},{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"}],"children":[]}]}]},{"id":"Js","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Cross","goalWeight":"0.2","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Alison","employeeLevel":"3","managerName":"Js","l1Mgr":"Jack","l2Mgr":"Js","goals":[{"goalName":"Research","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Peter","employeeLevel":"3","managerName":"Js","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Invest","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.33","goalColor":"NULL"}],"children":[]}]}]},{"id":"Jim","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Anne","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Marisa","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Spending","goalWeight":"1","goalColor":"NULL"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]},{"id":"Linda","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]}]},{"id":"Gene","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Total","goalWeight":"0.33","goalColor":"92.96"}],"children":[{"id":"Kathleen","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"% Clients","goalWeight":"1","goalColor":"NULL"},{"goalName":"Employee","goalWeight":"1","goalColor":"90"}],"children":[]},{"id":"Chris","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"processes","goalWeight":"1","goalColor":"NULL"},{"goalName":"Planning","goalWeight":"1","goalColor":"NULL"}],"children":[]}]}]}];
})
</script>
</head>
<body ng-controller="KPIListCtrl">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>SCORECARDS</h1>
HOME
</div>
<div data-role="content" style="height:400px">
<ul data-role="listview" id="list-L2" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L2 Scorecards
<li ng-repeat="aName in myChildren">
{{aName.id}}
</li>
</ul>
<ul data-role="listview" id="list-L3" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L3 Scorecards
<li ng-repeat="aName2 in myChildrenChildren">
{{aName2}}
</li>
</ul>
</div>
<div data-role="footer" id="list-L1" ng-click="$event.preventDefault()">
</form> <span ng-repeat="aName in myList" style="float:left">
{{user.name}}<br>
<button ng-click="showL2Content(aName.children)">{{aName.id}}</button>
</span></div>
</div>
</body>
</html>
This article talks about using recursion in directives: http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/
which sounds like it will solve your problem.
this works, but I'm feeling like I should either preprocess the JSON differently, or there might be a more 'angular' way of doing this.
<html ng-app="KPI_Scorecard">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<!--script src="https://ribbit.fmr.com/resources/statics/379584/angular.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!--script src="js/controllers.js"></script-->
<script>
var $j = jQuery.noConflict();
var KPI_Scorecard = angular.module('KPI_Scorecard', []);
var listL2;
var myChildren;
var myL3s = []
KPI_Scorecard.controller('KPIListCtrl', function ($scope) {
$scope.showL2Content = function (whatChildren) {
var myL3s = []
$scope.myChildren = whatChildren;
for (x = 0; x < whatChildren.length; x++) {
for (y = 0; y < whatChildren[x].children.length; y++) {
myL3s.push(whatChildren[x].children[y]);
}
};
$scope.myChildrenChildren= myL3s;
console.log(myL3s);
};
//console.log(myChildrenChildren);
$scope.showL3Content = function (whatChildren) {
//console.log(whatChildren);
};
$scope.myList = [{"id":"Jack","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Margin","goalWeight":"0.5","goalColor":"11.7"},{"goalName":"Expense","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Chuck","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Expense","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"David","employeeLevel":"3","managerName":"Chuck","l1Mgr":"Jack","l2Mgr":"Chuck","goals":[{"goalName":"budget","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Scott","employeeLevel":"3","managerName":"Chuck","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Investment","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Jill","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}]},{"id":"Rick","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"technology","goalWeight":"1","goalColor":"NULL"},{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"}],"children":[]}]}]},{"id":"Js","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Cross","goalWeight":"0.2","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Alison","employeeLevel":"3","managerName":"Js","l1Mgr":"Jack","l2Mgr":"Js","goals":[{"goalName":"Research","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Peter","employeeLevel":"3","managerName":"Js","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Invest","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.33","goalColor":"NULL"}],"children":[]}]}]},{"id":"Jim","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Anne","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Marisa","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Spending","goalWeight":"1","goalColor":"NULL"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]},{"id":"Linda","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]}]},{"id":"Gene","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Total","goalWeight":"0.33","goalColor":"92.96"}],"children":[{"id":"Kathleen","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"% Clients","goalWeight":"1","goalColor":"NULL"},{"goalName":"Employee","goalWeight":"1","goalColor":"90"}],"children":[]},{"id":"Chris","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"processes","goalWeight":"1","goalColor":"NULL"},{"goalName":"Planning","goalWeight":"1","goalColor":"NULL"}],"children":[]}]}]}];
})
</script>
</head>
<body ng-controller="KPIListCtrl">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>SCORECARDS</h1>
HOME
</div>
<div data-role="content" style="height:400px">
<ul data-role="listview" id="list-L2" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L2 Scorecards
<li ng-repeat="aName in myChildren">
{{aName.id}}
</li>
</ul>
<ul data-role="listview" id="list-L3" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L3 Scorecards
<li ng-repeat="aName2 in myChildrenChildren">
{{aName2.id}}
</li>
</ul>
</div>
<div data-role="footer" id="list-L1" ng-click="$event.preventDefault()">
</form> <span ng-repeat="aName in myList" style="float:left">
{{user.name}}<br>
<button ng-click="showL2Content(aName.children)">{{aName.id}}</button>
</span></div>
</div>
</body>
</html>