wake-up-neo.com

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

Ich versuche, HTML-Code mit den Funktionen ng-show Und ng-hide Anzuzeigen/auszublenden, die von AngularJS bereitgestellt werden. .

Laut Dokumentation lauten die jeweiligen Verwendungszwecke für diese Funktionen wie folgt:

ngHide - {expression} - Wenn der Ausdruck wahr ist, wird das Element angezeigt bzw. ausgeblendet. ngShow - {expression} - 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 ng-hide Und ng-show Den korrekten Wert true/false, die Werte jedoch Wird nicht als Boolescher Wert behandelt. Geben Sie daher immer false zurück:

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 Referenzieren von Objektparametern als Ausdrücke finden, also habe ich gehofft, dass jemand mit einem besseren Verständnis von AngularJS mir helfen kann?

194
My Head Hurts

Das foo.bar Referenz 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 sich innerhalb der geschweiften Klammer befinden, wobei Angular Direktiven dies nicht tun.

Siehe auch nderstanding Angular Templates .

374
My Head Hurts

Sie können {{}} Nicht verwenden, wenn Sie angular Direktiven zum Binden mit ng-model Verwenden, aber zum Binden von nicht eckigen Attributen müssten Sie {{}} ..

Z.B:

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

Versuchen Sie, den Ausdruck umzubrechen mit:

$scope.$apply(function() {
   $scope.foo.bar=true;
})
18
hrn

Schon seit ng-show ist ein angular Attribut, ich denke, wir müssen die Bewertungsblumenklammern nicht setzen ({{}}) ..

Bei Attributen wie class müssen die Variablen mit Auswertungsblumenklammern ({{}}).

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

entfernen Sie {{}} geschweifte Klammern um foo.bar, da angular - Ausdrücke in angular - Anweisungen nicht verwendet werden können.

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