如何在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示例