AngularJS:基于属性的模板中的变体

Question

假设我在AngularJS Web应用程序中有一个控制器,它有一个数据数组,用于存储非常相似的对象,但需要一个不同的模板,具体取决于成员变量'type'.例如 :

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>

然而,这将导致每个项目具有相同的显示.

输出bar中所有项目的最佳方法是什么,同时能够根据item.type的值更改模板？

Answer 1

我想你可以使用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>