如何在AngularJS中生成DOM元素？

我有一些數據與控制器的參數動作和變量的數字：如何在AngularJS中生成DOM元素？

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

所以轉動有一個參數，轉換和調整有兩個。我想在動作中爲每個name顯示一個select，然後當選擇一個時，顯示該動作具有的每個參數的input type='text'。在Angular中最簡單的方法是什麼？

來源

2013-05-12 nickponline

如果一套獨特name值比較小，你也許可以逃脫使用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 example

來源

2013-05-12 07:37:05

，我能想到的最簡單的方法是使用模板和NG-包括

創建3個模板爲每個下拉值，如

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

模板名稱應選擇元素相匹配命名

定義NG-包括像

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

在您的控制器代碼在範圍上創建一個selectedAction變量，並在選擇發生變化時對其進行更改。

每當selectedAction屬性發生更改時，將根據所選操作導致加載適當的模板。

來源

2013-05-12 07:18:04 Chandermani

如何在AngularJS中生成DOM元素？

回答

相關問題