Question

Folks-我有一个嵌套的父子结构的数据结构。第一级（父级）驱动角度以创建一排按钮。选择其中一个按钮会使用第二个级别（子项）填充列表。现在我也需要这个选择来推动第三级（孙子）。第三个div需要有孩子的所有孙子。

由于我对角度相对较新，我担心我在程序上看得太过分了。

代码如下：

<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>
            <a href="index.html" data-icon="home" data-theme="b">HOME</a>
        </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">
                <a href="#"  class="info-go" ng-click="showL2Content(aName.children)">{{aName.id}}</a>
                </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">
                <a href="#"  class="info-go" ng-click="showL3Content(aName2)">{{aName2}}</a>
                </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>

Answer 1

本文讨论在指令中使用递归：http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/ 听起来它会解决你的问题。

Answer 2

这很有效，但我觉得我应该以不同的方式预处理JSON，或者可能有更“有棱角”的方式来做这件事。

<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>
            <a href="index.html" data-icon="home" data-theme="b">HOME</a>
        </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">
                <a href="#"  class="info-go" ng-click="showL2Content(aName.children)">{{aName.id}}</a>
                </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">
                <a href="#"  class="info-go" ng-click="showL3Content(aName2)">{{aName2.id}}</a>
                </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>

与孩子的孩子一起填充角度div

2 个答案: