angularjs - examples - ngshow angular 5

ngHide o ngShow basado en el número de hijos

Question

Sé que es absolutamente estúpido preguntar, pero tengo curiosidad de que haya una manera de hacer algo como:

<div ng-show=''this.children.length > 0''> // shown
   <div>

   </div>
</div>

Answer 1

¡AngularJS hizo un cambio importante en la versión 1.3.0 !

Desafortunadamente, la respuesta de rajkamals ya no es correcta.

A partir de esta versión, solo estos 6 valores se consideran falsos:

1. false
2. null
3. undefined
4. NaN
5. 0
6. ""

Los valores ''f'' , ''0'' , ''false'' , ''no'' , ''n'' y [] (!) Se convirtieron en verdad.

Así que usando

<div ng-show="items">
    <!-- ... --->
</div>

ya no se puede recomendar si el div solo debería estar visible si los items contienen al menos 1 elemento, porque incluso con los items = [] se mostrará.

Answer 2

Al ver la mayoría de sus preguntas, parece que no está utilizando Angular de la manera "correcta" o quizás no puede hacerlo (debido a las restricciones del proyecto, tal vez!).

Algunas cosas generales a tener en cuenta.

1. Si está utilizando $ compile - es un olor de código. No necesitará usar $ compilar en el 95% de los casos. Si está usando $ compile, lo sabe y no puede encontrar otra forma de hacer lo que necesita hacer. Lo estás utilizando con mucha cautela.

2. Si está "consultando" al DOM para que haga algo, nuevamente es un posible olor. Nuevamente, en el 95% de los casos no necesitarás hacer eso. La forma correcta aquí es modificar el modelo y dejar que Angular maneje el DOM.

Deben usarse de la misma manera que usaría setTimeout 0, por ejemplo. Cada vez que lo uses, deberías sentirlo como un hack.

Si no tiene el control completo (o al menos parcial) de su HTML (¿el servidor es quizás?), Puede ensuciarse con Angular. Quizás es por eso que estás intentando hacer todas estas cosas de manipulación de DOM.

<div ng-show=''this.children.length > 0''> // shown
   <div>

   </div>
</div>

Este es un ejemplo en el que no estamos seguros de quién tiene el control. Si tiene acceso a la construcción que genera este html, también puede escribirlo con ng-init!

<div ng-init="childElements = {{serverside variable}}" ng-show=''childElements > 0''> // shown
   <div server-side-repeat>

   </div>
</div>

Si se ve obligado a hacer estas cosas en muchos lugares, ¿quizás Angular no sea la solución adecuada para usted?

Answer 3

AngularJS v1.3.3 => ng-show="items" funcionó para mí ya que evalúa el objeto verdadero, falso, nulo, indefinido. en el caso de los items=[] , ng-show aún se evalúa como verdadero. En su lugar tuve que usar:

<div ng-show="items.length">
    <!-- ... --->
</div>

Y funcionó !! Gracias por la dirección.

Answer 4

Como Christopher señaló, la respuesta aceptada ya no es correcta. Porque una matriz vacía aún se evalúa como veraz.

obj.children = []
<div ng-show=''obj.children''> 
  As of Angular 1.3 this always shows if children exists as part of obj. 
</div>

Solución actual

En este caso la matriz existe. Pero si le das a angular el elemento cero de la matriz de la matriz para evaluar, y no existe tal elemento, se evaluará como falso.

<div ng-show=''obj.children[0]''> 
  This will not show because there is no element in the array at 0
</div>

También puede usar esto con [n] como cualquier elemento numerado en la matriz para mostrar solo cuando el recuento es mayor que n. Si usa obj.children [2], solo se mostrará si tiene 3 o más elementos en la matriz.

Answer 5

En AngularJS, no deberíamos pensar en términos de nuestra visión, sino en términos de nuestro modelo.

Entonces debes preguntarte qué genera el contenido dentro de tu elemento. Si es dinámico, viene de tu modelo. Entonces, ¿a qué modelo de propiedad podría acceder para darle la información que necesita?

Aquí hay un ejemplo de ngRepeat:

<div ng-show="items.length > 0">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>

Answer 6

Esto también funciona perfectamente ...

<div ng-show="items.length">
<div ng-repeat="item in items">
<!-- bind to your Dom element -->
</div>
</div>

Answer 7

Para agregar a la respuesta de @Josh David Miller, los siguientes valores se consideran falsos en angular.

1) Una matriz vacía

2) Una cadena vacía // Incluso un espacio se considera verdadero

3) Un booleano con falso.

4) indefinido

5) nulo

6) 0

Entonces, la respuesta de David se puede escribir como,

<div ng-show="items.length">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>

o incluso más corto,

<div ng-show="items">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>