4

注：私はangularjsを初めて使用します

問題の最善の解決策/プラクティスは何ですか: 配列または型指定された値があります。型ごとに異なる入力 (テンプレートと入力の検証) が必要ですか?

例と簡略化

var vars = [
    {
        type: 'int',
        value: 42,
        min: 0,
        max: 42
    },
    {
        type: 'text',
        value: 'foobar'
    },
]

「int」テンプレートの場合は

<input type="range" max="{{max}}" min="{{min}}" value="{{value}}" />

および「テキスト」の場合

<textarea>{{value}}</textarea>

実際のケースでは、奇妙なインターフェースを持つ非常に多くの入力があります

4

1 に答える 1

6

ここではng-switch( docs ) が役に立ちます。このようなもの：

<div ng-repeat="item in items">
  <div ng-switch on="item.type">
    <div ng-switch-when="int">
      <input type="range" max="{{item.max}}" min="{{item.min}}"
        ng-model="item.value" />
    </div>

    <div ng-switch-when="text">
      <textarea ng-model="item.value"></textarea>
    </div>
  </div>
</div>

[アップデート]

タイプに基づいてテンプレートを動的に含めたいと述べたので、URL に評価される Angular 式を取るng-include( docs ) を見てください。

<div ng-repeat="item in items">
  <div ng-include="'input-' + item.type + '-template.htm'"></div>
</div>

インライン文字列連結が気に入らない場合は、コントローラー メソッドを使用して URL を生成できます。

<div ng-repeat="item in items">
  <div ng-include="templatePathForItem(item)"></div>
</div>

ドキュメントページの例ngIncludeはかなり良いです。

含まれるテンプレートには、現在のスコープのプロトタイプの子スコープが与えられることに注意してください。

于 2013-07-14T04:05:09.790 に答える