En las instrucciones nativas de Angular, estas instrucciones se utilizan para controlar si los elementos se muestran o no, ng-show/ng-hide/ng-if y ng-switch.
También a menudo lo usamos en la optimización del rendimiento angular.
Veamos sus diferencias.
Entre ellos, Ng-Show y Ng Hide son los mismos, excepto que NG-Show muestra las condiciones cuando se encuentran, y Ng Hide oculta las condiciones cuando se encuentran. No mencionaremos a Ng-Hide a continuación.
show de ng
Se activará un valor de bool recibido por ng-show para mostrar el nodo DOM cuando sea verdadero. Cuando el valor de Ng-Show es falso, se agrega una clase de escondite NG al nodo DOM, y la expresión de esta clase es "Pantalla: Ninguno". Cuando DOM se carga, se cargarán todos los nodos en Ng-Show. Es decir, ng-show solo oculta y muestra el nodo DOM. Esto significa que si hay demasiado aceite en la instrucción NG-Show, incluso si no lo muestran, el nodo DOM en el que se encuentran aún se representará.
NG-IF
NG-si también recibe un valor de bool. Cuando su valor es falso, el nodo que controla no se crea o el nodo DOM anterior será destruido. Incluso si este nodo contiene muchos enlaces NG, no se ejecutará. Por lo tanto, en el desarrollo del proyecto, si no necesitamos cargar el DOM a la vez, podemos usar NG-IF para evitar que el evento NG suceda, lo que acelera la velocidad de carga del DOM. Especialmente cuando se repite, el efecto es particularmente obvio cuando cada pieza de datos contiene estructuras de datos complejas. Cuando su valor es verdadero, se creará un nodo DOM.
Entonces, si utiliza instrucciones y plantillas para brindar información adicional, como hacer clic para mostrar la información detallada del elemento de la lista, asegúrese de usar NG-IF (AngularJSV. 1.1.5 y posterior). Bloquea la representación (en comparación con Ng-Show).
interruptor
La existencia de Ng-Switch nos ahorra muchos problemas (debería decirse que Angular mismo es así). Por ejemplo, utilizamos la forma tradicional de crear una pestaña. Necesitamos recorrer una y otra vez y luego juzgar el estado actual y luego ejecutar las cosas correspondientes. Usar Ng-Switch en Angular es muy simple. Ng-Switch primero debe escuchar una determinada variable, y qué contenido se mostrará a continuación cuando se valore la variable. Como se muestra arriba, cuando escucha un tipo similar a una variable, cuando el valor de tipo es igual a 'AAA', esta área se creará y se mostrará; Cuando el valor de tipo es igual a 'BBB', todos los DOM de la 'AAA' anterior serán destruidas, y luego se crearán y mostrarán todos los 'BBB'.
Ejemplo http://jsbin.com/hinehi/1/edit