switch - ng-class angularjs ejemplos

Angular.js ng-switch-cuando no se trabaja con datos dinámicos?

Question

Estoy tratando de obtener Angular para generar un control deslizante CSS basado en mis datos. Sé que los datos están ahí y puedo generarlos para los botones, pero el código no completará el interruptor ng cuando, por alguna razón. Cuando inspecciono el código, veo esto dos veces (lo que sé que es correcto porque solo tengo dos elementos):

<div ng-repeat="assignment in assignments" ng-animate="''animate''" class="ng-scope">
    <!-- ngSwitchWhen: {{assignment.id}} -->
</div>

Mi código actual:

<div ng-init="thisAssignment=''one''">
     <div class="btn-group assignments" style="display: block; text-align: center; margin-bottom: 10px">
         <span ng-repeat="assignment in assignments">
              <button ng-click="thisAssignment = ''{{assignment.id}}''" class="btn btn-primary">{{assignment.num}}</button>
         </span>
     </div>

     <div class="well" style="height: 170px;">
         <div ng-switch="thisAssignment">
              <div class="assignments">
                   <div ng-repeat="assignment in assignments" ng-animate="''animate''">
                        <div ng-switch-when=''{{assignment.id}}'' class="my-switch-animation">
                        <h2>{{assignment.name}}</h2>
                        <p>{{assignment.text}}</p>
                   </div>
              </div>
         </div>  
    </div>  
</div>

EDIT: Esto es lo que estoy tratando de emular, aunque con datos dinámicos. http://plnkr.co/edit/WUCyCN68tDR1YzNnCWyS?p=preview

Answer 1

De los docs

Tenga en cuenta que los valores de atributo con los que se deben hacer coincidencias no pueden ser expresiones Se interpretan como valores de cadena literal para que coincidan con. Por ejemplo, ng-switch-when = "someVal" coincidirá con la cadena "someVal" no con el valor de la expresión $ scope.someVal.

En otras palabras, ng-switch es para las condiciones de codificación de las plantillas.

Lo usarías así:

<div class="assignments">
  <div ng-repeat="assignment in assignments" ng-animate="''animate''">
    <div ng-switch="assignment.id">
      <div ng-switch-when=''1'' class="my-switch-animation">
      <h2>{{assignment.name}}</h2>
      <p>{{assignment.text}}</p>
    </div>
  </div>
</div>

Ahora bien, esto podría no ajustarse exactamente a su caso de uso, por lo que es posible que tenga que repensar su estrategia.

Ng-If es probablemente lo que necesita, además, debe tener en cuenta los ámbitos "aislados" . Básicamente, cuando usas ciertas directivas, como ng-repeat, creas nuevos ámbitos que están aislados de sus padres. Entonces, si cambia esta thisAssignment dentro de un repetidor, en realidad está cambiando la variable dentro de ese bloque de repetición específico y no todo el controlador.

Aquí hay una demo de lo que estás buscando.

Observe que asigno la propiedad seleccionada a la matriz de things (es solo un objeto).

Actualización 12/12/14: Agregar un nuevo bloque de código para aclarar el uso de ng-switch . El ejemplo de código anterior debe considerarse qué no hacer.

Como mencioné en mi comentario. El interruptor debe ser pensado exactamente como un interruptor de JavaScript. Es para la lógica de conmutación codificada. Así, por ejemplo, en mis publicaciones de ejemplo, solo habrá algunos tipos de publicaciones. Debe conocer con anticipación los tipos de valores que va a activar.

<div ng-repeat="post in posts">
  <div ng-switch on="post.type">

    <!-- post.type === ''image'' -->
    <div ng-switch-when="image" class="post post-image">
      <img ng-src="{{ post.image }} />
      <div ng-bind="post.content"></div>
    </div>

    <!-- post.type === ''video'' -->
    <div ng-switch-when="video" class="post post-video">
      <video ng-src="{{ post.video }} />
      <div ng-bind="post.content"></div>
    </div>

    <!-- when above doesn''t match -->
    <div ng-switch-default class="post">
      <div ng-bind="post.content"></div>
    </div>
  </div>
</div>

Podría implementar esta misma funcionalidad con ng-if , es su trabajo decidir qué tiene sentido dentro de su aplicación. En este caso, este último es mucho más sucinto, pero también más complicado, y se podría ver que se vuelve mucho más peludo si la plantilla fuera más compleja. La distinción básica es que ng-switch es declarativo, ng-if es imperativo.

<div ng-repeat="post in posts">
  <div class="post" ng-class="{
      ''post-image'': post.type === ''image'', 
      ''post-video'': post.type === ''video''">
    <video ng-if="post.type === ''video''" ng-src="post.video" />
    <img ng-if="post.type === ''image''" ng-src="post.image" />
    <div ng-bind="post.content" />
  </div>
</div>

Answer 2

Jon definitivamente tiene razón. Angular no admite valores ngSwitchWhen dinámicos. Pero yo quería que lo hiciera. Realmente me resultó excepcionalmente sencillo usar mi propia directiva en lugar de ngSwitchWhen . No solo admite valores dinámicos, sino que también admite múltiples valores para cada declaración (similar a los fallos de los conmutadores JS).

Una advertencia, solo evalúa la expresión una vez en el tiempo de compilación, por lo que debe devolver el valor correcto inmediatamente. Para mis propósitos, esto estaba bien, ya que quería usar constantes definidas en otra parte de la aplicación. Probablemente podría modificarse para volver a evaluar dinámicamente las expresiones, pero eso requeriría más pruebas con ngSwitch .

Uso angular 1.3.15, pero realicé una prueba rápida con angular 1.4.7 y también funcionó bien allí.

Demo plunker

El código

module.directive(''jjSwitchWhen'', function() {
    // Exact same definition as ngSwitchWhen except for the link fn
    return {
        // Same as ngSwitchWhen
        priority: 1200,
        transclude: ''element'',
        require: ''^ngSwitch'',
        link: function(scope, element, attrs, ctrl, $transclude) {
            var caseStms = scope.$eval(attrs.jjSwitchWhen);
            caseStms = angular.isArray(caseStms) ? caseStms : [caseStms];

            angular.forEach(caseStms, function(caseStm) {
                caseStm = ''!'' + caseStm;
                ctrl.cases[caseStm] = ctrl.cases[caseStm] || [];
                ctrl.cases[caseStm].push({ transclude: $transclude, element: element });
            });
        }
    };
});

Uso

Controlador

$scope.types = { audio: ''.mp3'', video: [''.mp4'', ''.gif''], image: [''.jpg'', ''.png'', ''.gif''] // Can have multiple matching cases (.gif) }; Modelo

  <div ng-switch="mediaType">
    <div jj-switch-when="types.audio">Audio</div>

    <div jj-switch-when="types.video">Video</div>

    <div jj-switch-when="types.image">Image</div>

    <!-- Even works with ngSwitchWhen -->
    <div ng-switch-when=".docx">Document</div>

    <div ng-switch-default>Invalid Type</div>
  <div>