使用指令的角度嵌套表單字段

我正在嘗試使用服務器響應動態地創建表單。表單可能有嵌套，分組等的字段。我曾嘗試爲我的字段類型創建一個指令，作爲'表單字段'，並使用ng-include指令爲所有嵌套字段重複。使用指令的角度嵌套表單字段

當我這樣做使用ul-li，輸出看起來是正確的，但是當我開始使用fieldset和textfields輸出不會呈現在所有文本域。

// Code goes here 

angular.module('NestedForm', []). 
controller('formController', function($scope) { 


}).directive('formField',function($compile) { 
    return { 
     replace:true, 
     require:'ngModel', 
     scope:{ 
      data :'=data', 
      ngModel : '=' 
     }, 
     restrict:'E', 
     link : function($scope, $element, $attrs) 
     { 
      var type = $scope.data.type; 
      var html = ""; 
      switch(type) 
      { 
      case 'textbox' : 
       html = '<input id=\''+$scope.data.name+'\' type="text" ng-model="ngModel" class="form-control">';break; 
      case 'fieldset' : 
       html = '<fieldset><legend>'+$scope.data.name+'</legend></fieldset>';break; 
      default: 
       break; 
      } 
      var $e =$compile(html)($scope); 
      $element.replaceWith($e); 
     } 
    } 
});

http://plnkr.co/edit/9b7wnPaaeppdJyq26qlN

感謝你的幫助。

來源

2014-10-10 Kathir

首先，你的問題太長了。許多人只是想快速閱讀問題，理解並回答，如果他們知道的話。如果問題太長，我們不會讀得太快，理解不正確，答案也不是來自對問題的充分理解。

我不完全閱讀你的問題，但它似乎你正在取代全部元素。

看看這個。

http://plnkr.co/edit/01T5d4ngGviKI0jPafSO?p=preview

 var $e =$compile(html)($scope); 
     $element.append($e); //instead of replacing it

來源

2014-10-10 22:19:51 allenhwkim

很抱歉的長期職位的問題。出於某種原因，當我發佈我不得不放置代碼，我把整個事情。感謝您的解決方案。這部分解決了我的問題。我正在嘗試獲取

中的表單字段。我應該使用編譯而不是鏈接。 – Kathir 2014-10-10 22:40:39

1.因爲表格不能有表格，所以沒有嵌套表格。你可以說嵌套的字段集。 2. fieldset是一個容器，輸入字段是項目，它應該有不同的指令。 3.在fieldset中生成html，包括文本和fieldset指令，然後編譯它。 – allenhwkim 2014-10-11 01:17:53

使用指令的角度嵌套表單字段

回答

相關問題