0

アクションと可変数のパラメーターを持ついくつかのデータを持つコントローラーがあります。

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

したがって、rotate には 1 つのパラメーターがあり、translate と scale には 2 つのパラメーターがあります。selectアクションでfor eachを表示してからname、いずれかを選択するinput type='text'と、そのアクションが持つ for each パラメータを表示したいと思います。Angular でこれを行う最も簡単な方法は何ですか?

4

2 に答える 2

0

私が考えることができる最も簡単な方法は、ng-includeでテンプレートを使用することです

次のように、ドロップダウン値ごとに 1 つずつ、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 プロパティが変更されるたびに、選択されたアクションに基づいて適切なテンプレートが読み込まれます。

于 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 に答える