如何在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元素？

回答

相关问题