オブジェクトに基づく角度指示付きの動的コンテンツとフォームの作成\ json

動的なフォームと構造の作成には苦労しており、解決策を見つけることができません。オブジェクトに基づく角度指示付きの動的コンテンツとフォームの作成 json

詳細：バックエンドはサービス名を含む動的構造を作成するために使用するサービスオブジェクト（json）を送信します。オブジェクトには、サービスに接続されているフォームを作成するための情報も含まれています（添付された画像を見てください）。また、サービスを選択すると（左の四角形のボタンをクリックすると）、フォームはすぐに表示されますが、円形ボタンをクリックした場合は変更することもできます（関連サービスの左ボタンが有効な場合のみ）左ボタンがデフラグしている場合、そのサービスのデータは再オープンされた場合にフォームを空白にするために消されます。

私はちょうどすべてのロジック

var services = [ { 
        "id" : "001", 
        "name" : "Serv1", 
        "fields" : [] 
       }, { 
        "id" : "002", 
        "name" : "Serv2", 
        "fields" : [] 
       }, { 
        "id" : "003", 
        "name" : "Serv3", 
        "fields" : [ { 
         "type" : "text", 
         "name" : "operation", 
         "label" : "Operation", 
         "required" : false, 
         "data" : "" 
        }, { 
         "type" : "text", 
         "name" : "note", 
         "label" : "Note", 
         "required" : false, 
         "data" : "" 
        }, { 
         "type" : "select", 
         "name" : "profile", 
         "label" : "Profile", 
         "options" : [ { 
          "name" : "000 - None", 
          "value" : "000" 
         }, { 
          "name" : "001 - Profile 1", 
          "value" : "001" 
         }, { 
          "name" : "002 - Profile 2", 
          "value" : "002" 
         } ], 
         "required" : false, 
         "data" : "" 
        } ] 
       }, { 
        "id" : "004", 
        "name" : "Serv4", 
        "fields" : [ { 
         "type" : "checkbox", 
         "name" : "develop", 
         "label" : "Develop possibility", 
         "required" : false, 
         "data" : false 
        }, { 
         "type" : "checkbox", 
         "name" : "acceptance", 
         "label" : "Accept", 
         "required" : false, 
         "data" : false 
        } ] 
       } ];

を接続する方法を見つけることができない誰かがこの

で私を助けることができる願っていdynamicForm.html

[<div ng-controller="??" directive="???"> 
    <md-card class="row" style="margin-bottom:20px;margin-left:0px;position:relative;max-width:650px;"> 
     <md-toolbar class="md-toolbar-tools" style="background-color:rgb(138, 180, 213);margin-bottom:10px;">{{SERVICE Name}}</md-toolbar> 
     <form name="myForm" class="form-horizontal" role="form" ng-submit="submitForm()" layout="row" layout-wrap style="padding-left: 40px;"> 
      <div ng-repeat="field in fields" flex=33>  
       <ng-form name="form"> 


        <!-- TEXT FIELDS --> 
        <div ng-if="field.type=='text'"> 
         <md-input-container> 
          <label>{{field.label}}</label> 
          <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" data-ng-model="field.data"/> 
         </md-input-container>  
        </div> 


        <!-- EMAIL FIELDS --> 
        <div ng-if="field.type=='email'"> 
         <md-input-container> 
          <label>{{field.label}}</label> 
          <input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" /> 
          <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Inserire mail!</span> 
          <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.email'}}">Non &egrave; una mail valida</span> 
         </md-input-container> 
        </div> 


        <!-- PASSWORD FIELDS --> 
        <div ng-if="field.type=='password'"> 
         <md-input-container> 
          <label>{{field.label}}</label> 
          <input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" ng-minlength={{field.min}} ng-maxlength={{field.max}} /> 
          <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span> 
          <span data-ng-show=" {{'!form.'+field.name+'.required && (form.'+field.name+'.$error.minlength || form.'+field.name+'.$error.maxlength)' }}">Passwords must be between 8 and 20 characters.</span> 
         </md-input-container> 
        </div> 


        <!-- SELECT FIELDS --> 
        <div ng-if="field.type=='select'"> 
         <md-input-container> 
          <label>{{field.label}}</label> 
          <md-select dynamic-name="field.name" data-ng-model="field.data"> 
           <md-option ng-repeat="option in field.options" ng-value="option.value">{{option.name}}</md-option> 
          </md-select> 
         </md-input-container> 
        </div>  

        <!-- DATE FIELDS --> 
        <div ng-if="field.type=='date'"> 
         <md-input-container> 
          <label>{{field.label}}</label> 
          <md-datepicker dynamic-name="field.name" data-ng-model="field.data" md-min-date="field.min" md-max-date="field.max"></md-datepicker> 
         </md-input-container> 
        </div> 

        <!-- RADIO FIELDS --> 
        <div ng-if="field.type=='radio'"> 
         <label class="col-sm-2 control-label">{{field.label}}</label> 
         <div class="checkbox" ng-repeat="option in field.options" > 
          <label>     
           <input type="radio" data-ng-model="field.data" name="taskGroup" id="{{option.name}}" value="{{option.id}}">{{option.name}} 
          </label> 
         </div> 
        </div> 

        <!-- CHECKBOX FIELDS --> 
        <div ng-if="field.type=='checkbox'"> 
         <md-input-container> 
          <md-checkbox dynamic-name="field.name" data-ng-model="field.data" name="taskGroup" id="{{option.name}}" value="{{option.id}}"> 
           {{field.label}} 
          </md-checkbox> 
         <md-input-container> 
        </div> 
       </ng-form> 
      </div> 
     </form> 
    </md-card> 
</div>]

https://i.stack.imgur.com/3Xk2s.png

出典

2016-11-26 Larsen