AngularJS: Variaciones en una plantilla basada en un atributo

Question

Digamos que tengo un controlador en una aplicación web AngularJS que tiene una matriz de datos que almacena objetos que son muy similares pero requieren una plantilla diferente dependiendo de la variable miembro 'tipo'. Por ejemplo:

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

Uno podría crear una plantilla a la salida de los datos usando la directiva ng de repetición como sigue:

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

Sin embargo, esto resultará en cada elemento que tiene la misma pantalla.

¿Cuál es el mejor método para mostrar todos los elementos en la barra mientras se puede variar la plantilla según el valor de item.type?

Answer 1

supongo que puede utilizar ngSwitch Directiva, con algo como esto:

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