Angular에서 재귀 템플릿을 만드는 방법중첩된 개체를 사용할 때 JS를 선택하십시오.

Angular에서 재귀 템플릿을 만드는 방법중첩된 개체를 사용할 때 JS를 선택하십시오.

중첩된 폼 요소 그룹을 포함하는 JSON 개체에서 동적으로 폼을 작성하려고 합니다.

  $scope.formData = [
  {label:'First Name', type:'text', required:'true'},
  {label:'Last Name', type:'text', required:'true'},
  {label:'Coffee Preference', type:'dropdown', options: ["HiTest", "Dunkin", "Decaf"]},
  {label: 'Address', type:'group', "Fields":[
      {label:'Street1', type:'text', required:'true'},
      {label:'Street2', type:'text', required:'true'},
      {label:'State', type:'dropdown',  options: ["California", "New York", "Florida"]}
    ]},
  ];

지금까지 ng-switch 블록을 사용했는데 위의 Address 객체와 같이 네스트된 항목에서는 ng-switch 블록을 유지할 수 없습니다.

바이올린을 소개합니다.http://jsfiddle.net/hairgamiMaster/dZ4Rg/

이 중첩된 문제에 가장 잘 대처할 수 있는 방법이 있습니까?감사합니다!

이게 도움이 될 것 같아요.구글 그룹에서 트리의 재귀 요소에 대해 찾은 답변입니다.

브렌던 오웬의 제안입니다.http://jsfiddle.net/brendanowen/uXbn6/8/

<script type="text/ng-template" id="field_renderer.html">
    {{data.label}}
    <ul>
        <li ng-repeat="field in data.fields" ng-include="'field_renderer.html'"></li>
    </ul>
</script>

<ul ng-controller="NestedFormCtrl">
    <li ng-repeat="field in formData" ng-include="'field_renderer.html'"></li>
</ul>

제안된 솔루션은 현재 요소에 자식이 있는 경우 ng-include 디렉티브를 사용하여 자신을 호출하는 템플릿을 사용하는 것입니다.

당신의 경우 ng-switch 디렉티브를 사용하여 템플릿을 만들고(각 타입의 라벨에 1케이스씩), 자 라벨이 있는 경우 마지막에 ng-include를 추가합니다.

@jpmorin과 @Ketan이 제안한 것을 조합하면(실제로 효과가 없기 때문에 @jpmorin의 답변에 약간의 변화가 있음)...이 있습니다.ng-if잎사귀가 불필요하게 생기는 것을 방지하다ng-repeat지시:

<script type="text/ng-template" id="field_renderer.html">
  {{field.label}}
  <ul ng-if="field.Fields">
      <li ng-repeat="field in field.Fields" 
         ng-include="'field_renderer.html'">
      </li>
  </ul>
</script>
<ul>
  <li ng-repeat="field in formData" ng-include="'field_renderer.html'"></li>
</ul>

여기 Plunker의 작업 버전이 있습니다.

ng-switch를 사용하여 Fields 속성의 가용성을 체크하는 것을 검토해 주십시오.이 경우 해당 조건에 대해 다른 템플릿을 사용합니다.이 템플릿은 Fields 배열에 ng-repeat이 있습니다.

오래된 질문인 것은 알지만, 검색을 통해 이곳을 방문할 수 있는 다른 분들을 위해 좀 더 깔끔한 해결책을 남겨두고 싶다고 생각했습니다.

템플릿 캐시 내에 템플릿을 저장할 필요는 없지만 동일한 아이디어를 기반으로 구축됩니다.좀 더 '깨끗한' 솔루션을 원했기 때문에 결국 https://github.com/dotJEM/angular-tree을 만들었습니다.

사용법은 매우 간단합니다.

<ul dx-start-with="rootNode">
  <li ng-repeat="node in $dxPrior.nodes">
    {{ node.name }}
    <ul dx-connect="node"/>
  </li>
</ul>

디렉티브는 컴파일(최신 버전)이 아닌 트랜슬루션을 사용하기 때문에 ng-include 예보다 성능이 향상됩니다.

여기의 데이터에 근거한 예:

angular
  .module('demo', ['dotjem.angular.tree'])
  .controller('AppController', function($window) {

    this.formData = [
      { label: 'First Name', type: 'text', required: 'true' },
      { label: 'Last Name',  type: 'text', required: 'true' }, 
      { label: 'Coffee Preference', type: 'dropdown', options: ["HiTest", "Dunkin", "Decaf"] }, 
      { label: 'Address', type: 'group',
      "Fields": [{
        label: 'Street1', type: 'text', required: 'true' }, {
        label: 'Street2', type: 'text', required: 'true' }, {
        label: 'State',   type: 'dropdown', options: ["California", "New York", "Florida"]
      }]
    }, ];

    this.addNode = function(parent) {
      var name = $window.prompt("Node name: ", "node name here");
      parent.children = parent.children || [];
      parent.children.push({
        name: name
      });
    }

    this.removeNode = function(parent, child) {
      var index = parent.children.indexOf(child);
      if (index > -1) {
        parent.children.splice(index, 1);
      }
    }

  });

<div ng-app="demo" ng-controller="AppController as app">

   <form>
        <ul class="unstyled" dx-start-with="app.formData" >
            <li ng-repeat="field in $dxPrior" data-ng-switch on="field.type">
                <div data-ng-switch-when="text">
                    <label>{{field.label}}</label>
                    <input type="text"/>
                </div>
                <div data-ng-switch-when="dropdown">
                    <label>{{field.label}}</label>
                    <select>
                        <option ng-repeat="option in field.options" value="{{option}}">{{option}}</option>
                    </select>
                </div>
                <div data-ng-switch-when="group" class="well">
                    <h2>{{field.label}}</h2>
                    <ul class="unstyled" dx-connect="field.Fields" />
                </div>   
            </li>
        </ul>
            <input class="btn-primary" type="submit" value="Submit"/>
    </form>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script src="https://rawgit.com/dotJEM/angular-tree-bower/master/dotjem-angular-tree.min.js"></script>

</div>

단지 부동산 기반 구조의 경우 jpmorin 포스트를 연장하고 싶을 뿐입니다.

JSON:

{
  "id": 203,
  "question_text_id": 1,
  "yes": {
    "question_text_id": 25,
    "yes": {
      "question_text_id": 26
    }
  },
  "no": {
    "question_text_id": 4
  }
}

보시다시피 json 객체는 어레이 구조를 포함하지 않습니다.

HTML

<div>
    <script type="text/ng-template" id="tree_item_renderer.html">
        <span>{{key}} {{value}}</span>
        <ul>
            <li ng-repeat="(key,value) in value.yes" ng-include="'tree_item_renderer.html'"></li>
            <li ng-repeat="(key,value) in value.no" ng-include="'tree_item_renderer.html'"></li>
        </ul>
    </script>

    <ul>
        <li ng-repeat="(key,value) in symptomeItems" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</div>

이 경우 반복할 수 있습니다.

ng-repeat에 대한 각도의 문서(여기 속성)

행의 실장은 이쪽에서 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/15661289/how-can-i-make-recursive-templates-in-angularjs-when-using-nested-objects