Angularjs动态指令 [英] Angularjs dynamic directives
问题描述
的注:我是很新的angularjs 的
什么是最好的解决办法/做法:
我有一个数组或类型的值,每种类型应该有不同的输入(模板和输入验证)?
What is the best solution/practice for problem: I have an array or typed values, for each type there should be different input(template and input validation)?
例如。并简化了
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>
在实际情况下,会有相当多的输入怪异接口
In real case there will be quite many inputs with weird interfaces
推荐答案
这是 NG-开关
(文档)可以在这里帮助你;是这样的:
An ng-switch
(docs) can help you out here; something like this:
<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-包括
(文档),它接受一个角前pression评估一个网址:
Since you mentioned you want to dynamically include a template based on the type, take a look at ng-include
(docs) which takes an Angular expression evaluating to a URL:
<div ng-repeat="item in items">
<div ng-include="'input-' + item.type + '-template.htm'"></div>
</div>
如果你不喜欢内联字符串连接,你可以使用一个控制器方法生成的网址:
If you don't like the inline string concatenation, you can use a controller method to generate the URL:
<div ng-repeat="item in items">
<div ng-include="templatePathForItem(item)"></div>
</div>
在 ngInclude
文档页面上的例子是pretty不错。
The example on the ngInclude
documentation page is pretty good.
请注意,包含的模板将被赋予当前范围的原型子范围。
Note that the included template will be given a prototypal child scope of the current scope.
这篇关于Angularjs动态指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!