如何顯示差異。基於angularjs屬性的HTML？

我有一系列類型的對象：text,selectoptions和multiselectoptions。我需要根據它們的類型將它們顯示爲可編輯的輸入。如何顯示差異。基於angularjs屬性的HTML？

例如，文本對象：

<input type="text" name="caption" value="{{option.value}}" />

一個selectoption/multiselectoptions：

<div ng-repeat="value in option.values"> 
    <input type="text" name="{{option.id}}[value][{{value.id}}]" value="{{value.value}}" /> 
    <input type="text" name="{{option.id}}[caption][{{value.id}}]" value="{{value.caption}}" /> 
</div>

這是這樣做的正確方法？有沒有更好的方法來表示它？在JSON對象

例子：

FORM: { 
    options: [ 
     { 
      type: "select", 
      values: [ 
       { 
        value: 0, 
        caption: "Some option" 
       }, 
       { 
        value: 1, 
        caption: "Some other option" 
       } 
      ] 
     }, 
     { 
      type: "text", 
      caption: "Some text item" 
     } 
    ] 
}

來源

2016-07-06 Don Rhummy

你可以使用NG-如果顯示基於模型的正確表單元素。以下是在plunker based on your code.

<form novalidate class="simple-form"> 
    <div ng-repeat="field in FORM.options"> 
     <input type="text" ng-model='field.caption' ng-if="field.type == 'text'" /><br /> 
     <div ng-if="field.type != 'text'"> 
      <div ng-repeat="value in field.values"> 
       Option: <input type="text" name="{{option.id}}[value][{{value.id}}]" value="{{value.value}}" /><br/> 
       Caption: <input type="text" name="{{option.id}}[caption][{{value.id}}]" value="{{value.caption}}" /><br/> 
      </div> 
     </div> 
    </div> 
    <button ng-click="submit()">Save</button> 
</form>

我檢查類型field.type並顯示在主NG-重複不同的HTML的例子。

的應用模型分配給FORM：

$scope.FORM = { 
    options: [ 
     { 
      type: "select", 
      values: [ 
       { 
        value: 0, 
        caption: "Some option" 
       }, 
       { 
        value: 1, 
        caption: "Some other option" 
       } 
      ] 
     }, 
     { 
      type: "text", 
      caption: "Some text item" 
     } 
    ] 
};

我還添加了一個提交按鈕，顯示在JavaScript控制檯模式，所以你可以看到數據被更新，當您更改值：

<button ng-click="submit()">Save</button>

來源

2016-07-06 17:57:17 Gregori

我用這個和組合'NG-包括=「text.html」'所以我可以把不同的佈局，在他們自己的文件。謝謝！ –

嘗試ng-switch其將切換到基於所述type從JSON對應HTML。

<div ng-repeat="opt in FORM.options" ng-switch on="opt.type"> 
    <select ng-switch-when="select"> 
     <option ng-repeat="val in opt.values" value='{{val.value}}'>{{val.caption}}</option> 
    </select> 

    <input type="text" ng-model="opt.caption" ng-switch-when="text"/> 
</div>

添加更多MultiSelect類型與ng-switch-when = "multiselect"。如果未指定type，請將ng-switch-default設置爲默認html。

Working Plunker

來源

2016-07-06 18:16:22 Sajal

如何顯示差異。基於angularjs屬性的HTML？

回答

相關問題