AngularJS: Odmiany w szablonie opartym na atrybucie

Question

Powiedzmy, że mam kontroler w aplikacji internetowej AngularJS, która ma tablicę danych, która przechowuje obiekty, które są bardzo podobne, ale wymagają innego szablonu w zależności od zmiennej składowej "typ". Na przykład:

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"}, 
    ]; 
} 

One mogłyby łatwo utworzyć szablon do wyprowadzania danych za pomocą dyrektywy NG-repeat następująco:

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

Jednak spowoduje to każdego elementu mającego taki sam wyświetlacz.

Jaka jest najlepsza metoda wyprowadzania wszystkich elementów na pasku przy możliwości zmiany szablonu w zależności od wartości item.type?

Answer 1

Przypuszczam, można użyć dyrektywy ngSwitch, z czymś takim:

<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>