0

我有一个控制器，其中包含一些数据，其中包含操作和可变数量的参数：

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

所以 rotate 有一个参数， translate 和 scale 有两个。我想在操作中显示select每个name人的一个，然后选择一个操作时显示Ainput type='text'动作所具有的每个参数。在 Angular 中最简单的方法是什么？

4

2 回答 2

0

我能想到的最简单的方法是使用带有 ng-include 的模板

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

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

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

定义一个 ng-include like

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

在您的控制器代码中，在范围上创建一个 selectedAction 变量，并在选择更改时更改它。

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

于 2013-05-12T07:18:04.807 回答
0

如果唯一的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 示例

于 2013-05-12T07:37:05.800 回答