web-dev-qa-db-fra.com

ng-show = "true" mais a toujours class = "ng-hide"

Je suis nouveau sur AngularJS, il peut donc y avoir une solution simple à mon problème. J'ai travaillé sur ce formulaire. J'ai deux entrées - une pour le nombre de portes et une pour le nombre de fenêtres. J'ai ensuite plusieurs divs que je veux montrer s'ils rencontrent un certain nombre de portes et de fenêtres. Lorsque j'entre des nombres dans l'entrée, le ng-show se résout à "vrai". Mais l'élément a toujours la classe de "ng-hide" sur lui qui le laisse toujours caché.

Voici un exemple de mon code:

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

Voici la sortie lorsque j'entre 3 portes et 4 fenêtres:

<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>
formsangularjsng-show
46
Josh

ngShow prend une Angular donc vous ne voulez pas les accolades doubles).

Cela fonctionnera pour vous:

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

violon de démonstration

Pour comprendre pourquoi regardons le ngShow code source :

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 clé est qu'il met une montre sur attr.ngShow. Lorsque vous définissez cet attribut sur {{(doors + windows) < 6}} la première chose qui se produit est que l'expression entre les accolades doubles est évaluée. Dans votre cas, les portes et les fenêtres commencent par undefined donc l'expression est évaluée à false. false est ensuite transmis à l'attribut. Un $watch Est donc placé sur false et chaque cycle $digestfalse est vérifié, et false continue d'être false de sorte que la fonction de montre ne fonctionne jamais.

La chose importante à noter est que l'attribut lui-même n'est pas surveillé, mais la valeur qui a été initialement transmise est surveillée. Ainsi, même si vous changez l'attribut par la suite en "vrai" et voyez ce changement dans le html, cela n'est jamais remarqué par la montre.

Lorsque, à la place, nous passons (doors + windows) < 6 En tant que attr.ngShow, Puis sur chaque $digest Le $watch Évalue cette expression. Et chaque fois que le résultat de l'expression change, la fonction de surveillance est appelée et l'ensemble de classes approprié.

88
KayakDave