5

非常に似ているが、メンバー変数の「タイプ」に応じて異なるテンプレートを必要とするオブジェクトを格納するデータ配列を持つ AngularJS Web アプリにコントローラーがあるとします。例えば ​​：

function fooCtrl($scope) {
    $scope.bar = [
        {"name": "example 1",
         "type": "egType1",
         "text": "Some example text"},
        {"name": "example 2",
         "type": "egType2",
         "text": "Some example text"},
        {"name": "example 3",
         "type": "egType3",
         "text": "Some example text"},
    ];
}

次のように ng-repeat ディレクティブを使用して、データを出力するテンプレートを簡単に作成できます。

<ul>
    <li ng-repeat="item in bar">
        {{item.name}}
        <p>{{item.text}}</p>
    </li>
</ul>

ただし、これにより、各アイテムが同じ表示になります。

item.typeの値に応じてテンプレートを変更しながら、バー内のすべてのアイテムを出力する最良の方法は何ですか?

4

1 に答える 1

11

次のようなもので、 ngSwitchディレクティブを使用できると思います。

<li ng-repeat="item in bar">
    <div ng-switch on="item.type">
        <div ng-switch-when="egType1">
            {{item.name}}
            <p>{{item.text}}</p>
        </div>
        <div ng-switch-when="egType2">
            XXX {{item.name}}
            <span>{{item.text}}</spab>
        </div>
        <div ng-switch-default>
            DEFAULT {{item.name}}
            <span>{{item.text}}</spab>
        </div>
    </div>
</li>
于 2012-08-15T11:21:02.103 に答える