使用递归和Angularjs追加Elemnts到HTML模板 [英] Recursion using Angularjs and Append Elemnts to an HTML Template

问题描述

我很新的Angularjs。我正在使用哪个为Angularjs前端和Django的tastypie为后端的应用程序。我做的是我在这里的主题嵌套在对方作为独生子女父母为多层次一个主题列表。这些水平可以是多个。我的数据结构为

I am quite new to Angularjs . I am working on an app which use Angularjs for front end and django-tastypie for back end. What I am doing is i have a topics list where topics are nested in each others as child parents for multiple levels. these levels can be multiple. my data structure is as

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

我可能有多个级别，此嵌套列表。我想要做的就是我想要做的是，如果我选择选择列表中有一个分主题元素​​，HTML被添加到模板和所选元素副标题成为它的元素。如果只有一个级别，将只有一个在模板选择菜单。
告诉我，我该怎么使用的角度重新present这棵树的模板。或者告诉我们，如果任何人有任何更好的主意。

I may have this nested list for multiple levels . What i want to do is that i want to do is that if I select an element from select list which has subtopics, a HTML is appended to the template and selected elements subtopics become its elements . If there is only one level there will be only one select menu on the template. Tell me how can I represent this tree in Template using angular. or tell if anyone have any better idea.

我想要的HTML渲染就像

my desired HTML rendering is like

<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>

意味着如果子主题都可以在选定的主题列出选择的标签应附加到模板选择子课题等。第一次我想只显示根元素。然后在点击想要显示逐级子主题级别。

means if the subtopics are available in the selected topics list a select tag should be appended to the template to select the sub topic and so on. First time I want to show the root elements only. and then on click want to show the subtopics level by level.

推荐答案

您需要拆模板两个。第一个可以通过使用递归的容器，主的主题模板：

You need to split your template in to two. The first one can by used as recursion container, the "main" topics template:

<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>

我使用自定义包括-TPL指令，因为ngInclude创造了新的范围（或用于创建，我目前使用的角度有点过时版本）：

I use custom include-tpl directive because ngInclude creates new scope (or used to create, I'm currently using a bit dated version of angular):

.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);
            });
           });
    }
  };
}])

这篇关于使用递归和Angularjs追加Elemnts到HTML模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！