2

ディレクティブ<ul />を使用して見られる典型的な入れ子構造とは異なる、水平バイナリ ツリー構造を作成する必要があります。ng-repeat

ng-include を使用して、ネストされたオブジェクトを渡すか、必要なネストされたオブジェクトを取得するにはどうすればよいですか?

コードは次のとおりです。

<div id="tree-container" ng-controller="CommentController">
    <ul class="root-tree" id="current-tree">
        <li class="root node">
            <div class="feed">
                <div class="comment">{{data.comment}}</div>
            </div> 
        </li>
        <li class="root-children">
            <ul class="tree" ng-include="'tree'"></ul>
        </li>
    </ul>
</div>

<script>
    app.controller("CommentController", ["$scope", function ($scope) {
        $scope.data = {
            comments: "blah",
            leftChildren: {
                comments: ["blah", "blah", "blah"],
                leftChildren: { comments: ["blah", "blah", "blah"] },
                rightChildren: { comments: ["blah", "blah", "blah"] }
            },
            rightChildren: { comments: ["blah", "blah", "blah"] }
        };
    )]);
</script>

<script type="text/ng-template" id="tree">
    <li class="node">
        <div class="feed">
            <div class="comment" ng-repeat="comment in data.leftChildren">{{comment.comment}}</div>
        </div>
    </li>
    <li class="node">
        <div class="feed">
            <div class="comment" ng-repeat="comment in data.rightChildren">{{comment.comment}}</div>
        </div> 
    </li>
    <li class="left-children">
        <ul class="tree" ng-include="'tree'"></ul>
    </li>
    <li class="right-children">
        <ul class="tree" ng-include="'tree'"></ul>
    </li>
</script>

#treeテンプレートには、2 つのng-includeディレクティブがあることがわかります。$scope入れ子ng-includeになった for each で、階層の次のレベルを on で使用したいと思います。$scope.dataこれはleftChildrenandになりrightChildrenます。

言い換えれば、私は基本的ng-repeatに、ネストされた配列を呼び出すときと同じ効果が欲しい$scope.

うまくいけば、これはすべて理にかなっています:)

4

1 に答える 1

7

状況を理解する前に少し考えさせられました。問題は ng-include とスコープに関連しています。各インクルードに異なるスコープを「送信」する方法。onload、ng-init、ng-model などで動作させることができなかったので、ここで探している新しい子スコープを作成する ng-repeat について考えました。

ここでPlunkerのデモを作成しました。データの作成方法を作り直さなければならなかったので、それらの変更を適用していただければ幸いです。トリックは、左右の子の配列を作成し、ng-repeat を使用して子スコープを作成することです。これで、2 つ以上のブランチを持つことさえできます。type プロパティを追加して、どちらが左か右かなどを確認することもできます。

結果 (画像へのリンク):

結果

JS（リワークデータ）

$scope.data = {
  text: "blah",
  comments: [
    {
      text: ["blahL11", "blahL12", "blahL13"],
      comments: [
        { 
          text: ["blahL111", "blahL112", "blahL113"] 
        },
        { 
          text: ["blahR111", "blahR112", "blahR113"] 
        }
      ]
    },
    {
      text: ["blahR11", "blahR12", "blahR13"] 
    }
  ]
};

HTML (ルート)

<ul>
  <li>{{data.text}}</li>
  <li ng-repeat="item in data.comments" ng-include="'tree.html'"></li>
</ul>

テンプレート(子)

<div>Child</div>
<ul>
  <li ng-repeat="text in item.text">{{text}}</li>
  <li ng-repeat="item in item.comments" ng-include="'tree.html'"></li>
</ul>
于 2013-04-25T02:31:53.853 に答える