如何在AngularJS中生成DOM元素？

Question

我有一个带有一些数据的控制器，这些数据是动作和可变数量的参数：

$scope.actions = [
 {name : 'rotate', r : '30'},
 {name : 'translate', x : '10', y : '10'},
 {name : 'scale', x : '10', 'y' : 10},
]

因此旋转有一个参数，平移和缩放有两个参数。 我想为操作中的每个name显示一个select ，然后在select一个name时为该操作具有的每个参数显示input type='text' 。 在Angular中最简单的方法是什么？

Answer 1

我能想到的最简单的方法是将模板与ng-include一起使用

为每个下拉值创建3个模板，例如

<script type="text/ng-template"  id="rotate">
<div>Angle</div> <input type='text' ng-model='r'/>
</script>

模板名称应与所选元素名称匹配

定义一个ng-include像

<ng-include src ="selectedAction.name"></ng-include>

在您的控制器代码中，在作用域上创建一个selectedAction变量，并在选择更改时对其进行更改。

每当selectedAction属性更改时，这将导致根据所选操作加载适当的模板。

Answer 2

如果唯一的一组name值相对较小，则可以使用ng-switch摆脱ng-switch ：

<select ng-model="selectedAction" ng-options="action.name for action in actions">
  <option value="">Select an Action</option>
</select>

<div ng-switch="selectedAction.name">
  <div ng-switch-when="rotate">
    <div><label>r: </label><input ng-model="selectedAction.r"></div>
  </div>

  <div ng-switch-when="translate">
    <div><label>x: </label><input ng-model="selectedAction.x"></div>
    <div><label>y: </label><input ng-model="selectedAction.y"></div>
  </div>

  <div ng-switch-when="scale">
    <div><label>x: </label><input ng-model="selectedAction.x"></div>
    <div><label>y: </label><input ng-model="selectedAction.y"></div>
  </div>
</div>

JSFiddle示例