2

私は Angularjs にまったく慣れていません。フロントエンドに Angularjs を使用し、バックエンドに django-tastypie を使用するアプリに取り組んでいます。私がやっていることは、トピックが複数のレベルの子の親として互いにネストされているトピック リストを持っていることです。これらのレベルは複数にすることができます。私のデータ構造は 

[{'id':1,
   'name':'science',
   'subtopics':[{
                 'id':1,
                  'name':'chemistry',
                   'subtopics':[{'id':1,
                                 'name':'atom',
                                  'subtopics':[{'id':1,'name':'science',:'subtopics':[]]
]]}}

このネストされたリストを複数のレベルで使用する場合があります。私がやりたいことは、サブトピックを持つ選択リストから要素を選択すると、HTML がテンプレートに追加され、選択された要素のサブトピックがその要素になることです。レベルが 1 つしかない場合、テンプレートの選択メニューは 1 つだけになります。angularを使用してテンプレートでこのツリーを表現する方法を教えてください。または、誰かがより良いアイデアを持っているかどうか教えてください。

私の希望するHTMLレンダリングは 

<label>Topic Level 1:</label>
<select ng-model="qt_topic_level_1" ng-options="topic.name for topic in qt_topicslist_level_1" ng-change="showSecondLevelTopics()">
</select></br>
<label ng-show="secondleveltopicslabel" ng-true-value="true" ng-false-value="false">Topic Level 2:</label>
<select ng-model="qt_topic_level_2" ng-options="topic.name for topic in qt_topicslist_level_2" ng-change="getThirdleveltopics()" ng-show="secondleveltopicslist" ng-true-value="true" ng-false-value="false" >
</select></br>

選択したトピック リストでサブトピックが使用可能な場合、テンプレートに選択タグを追加してサブトピックを選択する必要があることを意味します。初めてルート要素のみを表示したい。そしてクリックすると、レベルごとにサブトピックを表示したい。

4

1 に答える 1

2

テンプレートを 2 つに分割する必要があります。最初のものは、再帰コンテナーとして使用できる「メイン」トピック テンプレートです。

<div ng-repeat="topic in topics">
  <div include-tpl="path/to/topic/tpl-recursive"></div>
</div>

そして、単一のトピックのテンプレート:

<div class="topic">
  <!-- ..topic content.. -->

  <div class="subtopics">
     <div ng-repeat="topic in topic.subtopics">
       <div include-tpl="path/to/topic/tpl-recursive"></div>
     </div>
  </div>
</div>

ngInclude は新しいスコープを作成するため (または作成に使用されます。現在、Angular の少し古いバージョンを使用しています)、カスタムの include-tpl ディレクティブを使用します。

.directive('includeTpl', ['$compile', '$http', function($compile, $http){
  return {
    restrict: 'A',
    link: function($scope, $element, $attrs) {
        var replace = typeof $attrs.replace !== 'undefined';
          $scope.$watch($attrs.includeTpl, function(value) {
            if (!value) return;
            $http.get(value).then(function(html){
              var content = $compile(html)($scope);
              if (replace) $element.replaceWith(content);
              else $element.html(content);
            });
           });
    }
  };
}])
于 2013-11-14T08:36:28.423 に答える