AngularJS: ng-show / ng-hide funktioniert nicht mit `{{}}` Interpolation

193

Ich versuche, HTML mit den von AngularJS bereitgestellten Funktionen ng-showund ein- / auszublenden .ng-hide

Laut Dokumentation ist die jeweilige Verwendung für diese Funktionen wie folgt:

ngHide - {Ausdruck} - Wenn der Ausdruck wahr ist, wird das Element angezeigt bzw. ausgeblendet. ngShow - {Ausdruck} - Wenn der Ausdruck wahr ist, wird das Element angezeigt bzw. ausgeblendet.

Dies funktioniert für den folgenden Anwendungsfall:

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

Wenn wir jedoch einen Parameter aus einem Objekt als Ausdruck verwenden, erhalten die ng-hideund ng-showden korrekten true/ falseWert, aber die Werte werden nicht als Boolescher Wert behandelt. Geben Sie daher immer Folgendes zurück false:

Quelle

<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p>
<p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>

Ergebnis

<p ng-hide="true">I should be hidden but I'm actually shown</p>
<p ng-show="true">I should be shown but I'm actually hidden</p>

Dies ist entweder ein Fehler oder ich mache das nicht richtig.

Ich kann keine relativen Informationen zum Verweisen auf Objektparameter als Ausdrücke finden, also hoffte ich, dass jemand mit einem besseren Verständnis von AngularJS mir helfen kann?

angularjs ng-show ng-hide Mein Kopf tut weh
quelle

Antworten:

375

Die foo.barReferenz sollte keine geschweiften Klammern enthalten:

<p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
<p ng-show="foo.bar">I could be shown, or I could be hidden</p>

Angular Ausdrücke müssen innerhalb der geschweiften Klammer-Bindungen sein, wo als Winkel Richtlinien nicht.

Siehe auch Grundlegendes zu Winkelvorlagen .

Mein Kopf tut weh
quelle
76
"Winkelausdrücke müssen innerhalb der geschweiften Klammern liegen, wohingegen dies bei Angular-Direktiven nicht der Fall ist." Diese Linie genau dort. Ich wünschte, ich könnte dies zweimal positiv bewerten.
MushinNoShin
3
Wenn Sie überprüfen möchten, ob die <p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>
Datei
1
Danke, das war nicht sehr intuitiv (wie man an allen Up-
Sentient
1
In der Dokumentation zu ng-hide ( docs.angularjs.org/api/ng/directive/ngHide ) wird das Argument speziell als Ausdruck bezeichnet, was bedeutet, dass geschweifte Klammern erforderlich sind. Was fehlt mir hier?
Ed Norris
1
Diese Antwort ist eigentlich nicht richtig. Geschweifte Klammern geben an, dass der Ausdruck ausgeführt und das Ergebnis in das DOM eingefügt werden soll, während die Direktive den Attributwert abhängig von ihrer Logik als Ausdruck behandeln kann oder nicht. Einige Richtlinien (ngHref) unterstützen sogar geschweifte Klammern.
Vasaka
31

Sie können nicht verwenden, {{}}wenn Sie Winkelanweisungen zum Binden mit verwenden, ng-modelaber zum Binden von Nicht-Winkelattributen müssten Sie verwenden {{}}.

Z.B: 

ng-show="my-model"
title = "{{my-model}}"
SHIVANG SANGHI
quelle
18

Versuchen Sie, den Ausdruck mit folgenden Zeichen zu versehen: 

$scope.$apply(function() {
   $scope.foo.bar=true;
})
hrn
quelle
7
Das foo.bar = truesollte sein scope.foo.bar = true, um den Wert vonfoo.bar
Rajkamal Subramanian
1
Ich hatte ein seltsames Problem, bei dem es manchmal angezeigt wurde und manchmal nicht, und meine Bereichsaktualisierungen in $ scope verpackte. $ Apply (function () {}); arbeitete für mich :)
nie neu
Ich bin neu in Angular und möchte dies lieber nicht jedes Mal tun, wenn ich eine Variable festlegen muss. Kann jemand erklären, warum dies manchmal benötigt wird?
Davis
Ein hilfreicher Blog-Beitrag hat mir geholfen, dies zu beantworten. Stellt sich heraus , jede Ajax oder benutzerdefinierte Zuhörer haben Fragen zu aktualisieren und erfordern eine$scope.$apply
davis
7

Da ng-showes sich meiner Meinung nach um ein Winkelattribut handelt, müssen wir die Bewertungsblumenklammern ( {{}}) nicht einfügen.

Für Attribute wie müssen classwir die Variablen mit Bewertungsblumenklammern ( {{}}) kapseln .

Rajkamal Subramanian
quelle
close - ich hinein geschaut und es scheint , dass Winkel Ausdrücke in geschweiften Klammern werden müssen , wo Winkel Richtlinien nicht
My Head Hurts
7 
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script type="text/javascript">
    function controller($scope) {
        $scope.data = {
            show: true,
            hide: false
        };
    }
</script>

<div ng-controller="controller">
    <div ng-show="data.show"> If true the show otherwise hide. </div>
    <div ng-hide="!(data.hide)"> If true the show otherwise hide.</div>
</div>
Anil Singh
quelle
0

Entfernen Sie {{}} Klammern um foo.bar, da Winkelausdrücke in Winkelanweisungen nicht verwendet werden können.

Für mehr Informationen : https://docs.angularjs.org/api/ng/directive/ngShow

Beispiel

  <body ng-app="changeExample">
    <div ng-controller="ExampleController">
    <p ng-show="foo.bar">I could be shown, or I could be hidden</p>
    <p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
    </div>
    </body>

<script>
     angular.module('changeExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.foo ={};
          $scope.foo.bar = true;
        }]);
</script>
Vijay Kumar Reddy
quelle
-1

Wenn Sie ein Element basierend auf dem Status eines {{Ausdrucks}} ein- / ausblenden möchten, können Sie Folgendes verwenden ng-switch:

<p ng-switch="foo.bar">I could be shown, or I could be hidden</p>

Der Absatz wird angezeigt, wenn foo.bar true ist, und ausgeblendet, wenn false.

Roberto
quelle