How do I generate DOM elements in AngularJS?

Question

I have a controller with some data with are actions and variable numbers of parameters:

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

So rotate has one parameter, translate and scale have two. I would like to show a select for each name in actions and then when one is selected show a input type='text' for each parameter that that action has. What is the easiest way to do this in Angular?

Answer 1

The easiest way that i can think of is to use templates with ng-include

Create 3 templates one for each dropdown value, such as

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

The template name should match the selected element name

Define a ng-include like

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

In your controller code create a selectedAction variable on the scope, and change it whenever the selection changes.

Whenever selectedAction property changes, this would cause a appropriate template to get loaded based on the action selected.

Answer 2

If the unique set of name values is relatively small, you might be able to get away with using 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