ng-show = "true" aber hat immer noch class = "ng-hide"

Ich bin neu in AngularJS, daher kann es eine einfache Lösung für mein Problem geben. Ich habe an diesem Formular gearbeitet. Ich habe zwei Eingänge - einer für die Anzahl der Türen und einer für die Anzahl der Fenster. Ich habe dann mehrere divs, die ich zeigen möchte, wenn sie eine bestimmte Anzahl von Türen und Fenstern insgesamt treffen. Wenn ich Zahlen in die Eingabe eingib, wird die ng-show in "wahr" aufgelöst. Aber das Element hat immer noch die Klasse "ng-hide", die es immer noch versteckt.ng-show = "true" aber hat immer noch class = "ng-hide"

Hier ist eine Probe von meinem 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>

Hier ist der Ausgang, wenn ich 3 Türen betreten und 4 Fenster:

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

Quelle

2014-01-15 Josh

ngShow einen Winkel Ausdruck nimmt, so dass Sie die Doppel nicht wollen Geschweifte Klammern.

Dies wird für Sie arbeiten:

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

demo fiddle

Um zu verstehen, warum die am ngShow source code aussehen lassen:

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'); 
    }); 
    }; 
}];

Der Schlüssel ist, dass es eine Uhr auf attr.ngShow setzt. Wenn Sie dieses Attribut auf {{(doors + windows) < 6}} festlegen, wird zuerst der Ausdruck in den doppelten geschweiften Klammern ausgewertet. In Ihrem Fall beginnen Türen und Fenster undefined, so dass der Ausdruck false auswertet. Dann wird false an das Attribut übergeben. So wird ein $watch auf false platziert und jeder $digest Zyklus false wird überprüft, und false bleibt false, so dass die Überwachungsfunktion nie ausgeführt wird.

Es ist wichtig zu beachten, dass das Attribut selbst nicht überwacht wird, aber der Wert, der anfänglich übergeben wurde, wird überwacht. Auch wenn Sie später das Attribut auf "true" ändern und diese Änderung im HTML-Code sehen, wird dies von der Uhr nie bemerkt.

Wenn wir stattdessen als attr.ngShow übergeben, dann wertet der $watch diesen Ausdruck aus. Und immer wenn das Ergebnis des Ausdrucks sich ändert, wird die Überwachungsfunktion aufgerufen und die entsprechende Klasse gesetzt.

Quelle

2014-01-15 05:50:14 KayakDave

Wow! Vielen Dank! Das hat den Trick gemacht. – Josh

Ich bin jetzt nur neugierig. Warum hat AngularJS das so interpretiert? Ich versuche zu verstehen, wie es funktioniert. – Josh

Ich habe gerade aktualisiert - sehen, ob das hilft. – KayakDave

ng-show = "true" aber hat immer noch class = "ng-hide"

Antwort

Verwandte Themen