ng-show, ng hide funktioniert. aber ng, wenn es nicht funktioniert

Question

ng-show, ng verstecken funktioniert. aber ng wenn nicht

<svg ng-show="abc.chartLoaded" ></svg> 
<div class="loader" ng-hide="abc.chartLoaded"></div> 

dieser Code arbeiten arbeitet ,, aber ich brauche es in ng-wenn sein shoud.

<svg ng-if="abc.chartLoaded == 'true'" ></svg> 
    <div class="loader" ng-if="abc.chartLoaded == 'false'></div> 

dieser Code funktioniert nicht !!! und mein js-Code ist:

scope.initExplorer = function() { 
    scope.widget.chartLoaded='true';} 

jede mögliche Hilfe bitte !!!

Answer 1

Entfernen Sie die Anführungszeichen. Oder besser, entfernen Sie die == true und == false und Verwendung booleans für stabilere Bedingungen:

<svg ng-if="abc.chartLoaded" ></svg> 
<div class="loader" ng-if="!abc.chartLoaded"></div> 

JS

scope.initExplorer = function() { 
scope.widget.chartLoaded=true;} 

Answer 2

Es sieht aus wie Sie Einstellung scope.widget.chartLoaded in Ihrem initExplorer; Ihre Vorlage referenziert jedoch abc.chartLoaded. Es sollte widget.chartLoaded sein.

Answer 3

Boolesche Werte in Javascript sind false und true ohne die Anführungszeichen. 'true' gilt als eine Zeichenfolge und es ist nicht das Gleiche.

Beachten Sie, dass es auch truthy and falsy Werte gibt: if(0){} ist das Gleiche wie if(false){}.

Zurück zu Ihrem Beispiel:

Seit 'true' ist truthy, ng-show="abc.chartLoaded" und ng-if="abc.chartLoaded" würde auf true beheben, die Ihr Element zeigen.

Ich würde empfehlen, false und true zu verwenden, um Verwirrung zu vermeiden.

Wenn Sie ein Attribut an scope Objekt anhängen, wird es in Ihrer HTML-Vorlage mit dem gleichen Namen verfügbar.

Versuchen Sie dies in Ihrem Controller:

scope.widget = {}; //you need to initialize widget if not done elsewhere 

scope.initExplorer = function() { 
    scope.widget.chartLoaded = true; 
} 

Und in Ihrem html:

<svg ng-if="widget.chartLoaded" ></svg>