Angularjs動態指令

Question

注：我是很新的angularjs

什麼是最好的解決辦法/做法： 我有一個數組或類型的值，對於每種類型應該有不同的輸入（模板和輸入驗證）？

E.g.和簡化

var vars = [ 
    { 
     type: 'int', 
     value: 42, 
     min: 0, 
     max: 42 
    }, 
    { 
     type: 'text', 
     value: 'foobar' 
    }, 
] 

爲 '詮釋' 模板將

<input type="range" max="{{max}}" min="{{min}}" value="{{value}}" /> 

和 '文'

<textarea>{{value}}</textarea> 

在現實情況下，會有相當多的輸入怪異接口

Answer 1

一個ng-switch（docs）可以幫助你在這裏;是這樣的：

<div ng-repeat="item in items"> 
    <div ng-switch on="item.type"> 
    <div ng-switch-when="int"> 
     <input type="range" max="{{item.max}}" min="{{item.min}}" 
     ng-model="item.value" /> 
    </div> 

    <div ng-switch-when="text"> 
     <textarea ng-model="item.value"></textarea> 
    </div> 
    </div> 
</div> 

[更新]

既然你提到要動態包括基於類型的模板，看看ng-include（docs）這需要一個角度表達評估到一個URL：

​​

如果你不喜歡內聯字符串連接，你可以使用控制器方法生成網址：

<div ng-repeat="item in items"> 
    <div ng-include="templatePathForItem(item)"></div> 
</div> 

ngInclude文檔頁面上的示例非常好。

請注意，包含的模板將被賦予當前範圍的原型子範圍。