使用AngularJS，我可以使用json數據生成輸入並插入到dom中嗎？

我正在處理自定義模板系統。用戶選擇一個模板，調用一個角度$http並獲取有關該模板的信息。包括在JSON響應是填充模板需要的投入：使用AngularJS，我可以使用json數據生成輸入並插入到dom中嗎？

{ 
    "template":{ 
     "title": "Test Template", 
     "slug": "testTemplate", 
     "version": 1.0, 
     "inputs": 
     [ 
      { 
       "type": "text", 
       "name": "title", 
       "label": "Header Title" 
      }, 
      { 
       "type": "textarea", 
       "name": "intro", 
       "label": "Introduction" 
      } 
     ] 
    } 
}

我想用在每個inputs值添加頁面上輸入。我不得不假設什麼輸入可能是文本，數字，選擇，textarea，文件等我假定我需要使用指令來提供參數，將返回生成的輸入，然後我需要添加他們到頁面可能是一個ng-repeat。

任何幫助，鏈接或推動正確的方向將是一個偉大的。

來源

2017-02-13 dcp3450

你知道，如果JSON總是包含'inputs'或者它可以是任何HTML元素，這個例子恰好有'input' – Rikin

@Rikin我這回事了一個最後定義json結構。我想讓其他用戶保持簡單。「輸入」只是任何表單元素的通用術語。 – dcp3450

下面是我很快通過的示例代碼，它在假設json將始終具有零個或多個輸入的情況下工作。

$scope.inputs= [ { "type": "text", "name": "title", "label": "Header Title" }, { "type": "textarea", "name": "intro", "label": "Introduction" } ];

<input ng-repeat="x in inputs" type="{{x.type}}" name="{{x.name}}">{{x.label}}</input>

來源

2017-02-13 00:36:08 Rikin

我想過這個。它會工作，直到我需要一個'textarea'或一個'select'。我可以用一個包裝器和一個'ng-if'來做類似的事情，這個包裝器會重複每個輸入，並根據json中的選項顯示一個元素。 – dcp3450

你可以使用的其他方式是使用'ng-bind-html'並讓json在屬性名爲'inputs'或'form.elements'中填充整個HTML – Rikin

使用AngularJS，我可以使用json數據生成輸入並插入到dom中嗎？

回答

相關問題