forms - examples - ng-show condition
ng-show="true" pero todavía tiene class="ng-hide" (1)
Soy nuevo en AngularJS, por lo que puede haber una resolución simple para mi problema. He estado trabajando en esta forma. Tengo dos entradas, una para el número de puertas y una para el número de ventanas. Luego tengo varios divs que quiero mostrar si cumplen una cierta cantidad de puertas y ventanas totales. Cuando ingreso números en la entrada, el ng-show se resuelve en "verdadero". Pero el elemento todavía tiene la clase de "ng-hide" que todavía lo deja oculto.
Aquí hay una muestra de mi código:
<body ng-app>
Doors: <input type="number" ng-model="doors"><br>
Windows: <input type="number" ng-model="windows"><br>
<div ng-show="{{(doors + windows) < 6}}">
Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="{{(doors + windows) > 5 && (doors + windows) < 11}}">
Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="{{(doors + windows) > 10 }}">
Shows if you have more than 10 doors and windows combined.
</div>
</body>
Aquí está la salida cuando entro 3 puertas y 4 ventanas:
<div ng-show="false" class="ng-hide">
Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="true" class="ng-hide">
Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="false" class="ng-hide">
Shows if you have more than 10 doors and windows combined.
</div>
ngShow toma una expresión angular para que no desee las llaves dobles.
Esto funcionará para ti:
<div ng-show="(doors + windows) < 6">
Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="(doors + windows) > 5 && (doors + windows) < 11">
Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="(doors + windows) > 10">
Shows if you have more than 10 doors and windows combined.
</div>
Para entender por qué echemos un vistazo al código fuente de ngShow :
var ngShowDirective = [''$animate'', function($animate) {
return function(scope, element, attr) {
scope.$watch(attr.ngShow, function ngShowWatchAction(value){
$animate[toBoolean(value) ? ''removeClass'' : ''addClass''](element, ''ng-hide'');
});
};
}];
La clave es que pone un reloj en attr.ngShow . Cuando establece ese atributo en {{(doors + windows) < 6}} lo primero que sucede es que se evalúa la expresión en las llaves dobles. En su caso, las puertas y ventanas comienzan undefined por lo que la expresión se evalúa como false . Luego, se pasa false al atributo. Por lo tanto, un $watch se coloca en false y cada $digest cycle cycle false se comprueba, y false sigue siendo false para que la función de reloj nunca se ejecute.
Lo importante a tener en cuenta es que el atributo en sí no se está viendo, pero el valor que se pasó inicialmente se mira. Entonces, aunque luego cambies el atributo a "verdadero", y veas ese cambio en el html, el reloj nunca lo notará.
Cuando, en cambio, pasamos (doors + windows) < 6 como attr.ngShow luego en cada $digest el $watch evalúa esa expresión. Y siempre que el resultado de la expresión cambie, se llama a la función de reloj y se establece la clase apropiada.