javascript - Angularjs 动态指令

Question

注意:我对 angularjs 很陌生

问题的最佳解决方案/实践是什么: 我有一个数组或类型值，对于每种类型应该有不同的输入(模板和输入验证)？

例如并简化

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

对于“int”模板将是

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

对于“文本”

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

在实际情况下，会有相当多的输入具有奇怪的接口(interface)

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 )，它将一个 Angular 表达式计算为一个 URL:

<div ng-repeat="item in items">
  <div ng-include="'input-' + item.type + '-template.htm'"></div>
</div>

如果您不喜欢内联字符串连接，您可以使用 Controller 方法生成 URL:

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

ngInclude 文档页面上的示例非常好。

请注意，包含的模板将被赋予当前作用域的原型(prototype)子作用域。