再帰ng-repeat x times

私の角形テンプレートで深くネストされたjavascriptオブジェクトを繰り返す必要があります。問題は、データがどのように私に渡されるか、データがどれだけ深くネストされているかを知る方法を制御できないことです。再帰ng-repeat x times

データはこの

{ 
    category_name: 'cat1' 
    children: [ 
     { 
      category_name: 'cat1a', 
      children: [...]    
     } 
    ] 
}

そしてこれは、2つのレベルの深チェック

<div ng-repeat="cat in categories"> 
    <div ng-repeat="subcat in cat.children"> 
     {{subcat.name}} 
     <!-- 
      would like to programatically place an ng-repeat here too 
      if subcat.children.length > 0 
     --> 
    </div> 
    {{cat.name}} 
</div>

テンプレートのように見えますが、左の子が存在しないまで、どのように私は、再帰的に繰り返すことができますか？私は、必要に応じて新しいng-repeatをコンパイルするカスタムディレクティブを作成する必要があると思っています。

出典

2017-08-01 richbai90

あなたはディレクティブのスクリプトタイプng-template/textでng-includeを使用してn個を書くために再帰的に呼び出すことができます子供。（PLUNKER）

<body ng-controller="MainCtrl as vm"> 
    <script type="text/ng-template" id="nested.html"> 
    {{item.category_name}} 
    <ul> 
     <li ng-repeat="item in item.children" ng-include="'nested.html'"></li> 
    </ul> 
    </script> 

    <ul> 
    <li ng-repeat="item in vm.data" ng-include="'nested.html'"></li> 
    </ul> 
</body>

詳細ためチェックの角度のドキュメント：https://docs.angularjs.org/api/ng/directive/script完全に働いた

出典

2017-08-02 01:41:08

ありがとう！ – richbai90

次のことを試してみてください。

module.js

var app = angular.module('app', []); 
    app.component("category", { 
     controller: function() { 
     this.data = { 
      category_name: 'cat1', 
      children: [{ 
      category_name: 'cat1-A', 
      children: [{ 
       category_name: 'cat1-A-a', 
       children: [{ 
       category_name: 'cat1-A-a-1', 
       children: [] 
       }, 
       { 
       category_name: 'cat1-A-a-2', 
       children: [] 
       } 
      ] 
      }] 
      }] 
     }; 
     }, 
     template: '<child current-cat="$ctrl.data"></child>' 
    }); 

    app.component("child", { 
    template: '<div>{{$ctrl.currentCat.category_name}}' + 
     '<div style="padding-left:20px;" ng-repeat="cat in $ctrl.currentCat.children">' + 
     '<child current-cat="cat"></child>' + 
     '</div>' + 
     '</div>', 
    bindings: { 
     currentCat: '<' 
    } 
    });

index.htmlを

<html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script> 
    <script src="module.js"></script> 
    </head> 
    <body ng-app="app"> 
    <div> 
     <category></category> 
    </div> 
    </body> 
</html>

出典

2017-08-02 00:11:25

答えて

関連する問題