AngularJS: ng-show / ng-hide nie działa z interpolacją `{{}}`

193

Próbuję pokazać / ukryć trochę HTML za pomocą funkcji ng-showi ng-hidedostarczonych przez AngularJS .

Zgodnie z dokumentacją odpowiednie użycie tych funkcji jest następujące:

ngHide - {wyrażenie} - Jeśli wyrażenie jest zgodne z prawdą, element jest odpowiednio pokazywany lub ukryty. ngShow - {wyrażenie} - Jeśli wyrażenie jest zgodne z prawdą, element jest odpowiednio pokazywany lub ukryty.

Działa to w następującym przypadku użycia:

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

Jednakże, jeśli powinniśmy użyć parametru z obiektu jako wyrażenia, wtedy ng-hidei ng-showotrzymują poprawną true/ falsewartość, ale wartości nie są traktowane jako wartość logiczna, więc zawsze zwracaj false:

Źródło

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

Wynik

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

To jest błąd lub nie robię tego poprawnie.

Nie mogę znaleźć żadnych względnych informacji na temat odwoływania się do parametrów obiektu jako wyrażeń, więc miałem nadzieję, że ktoś, kto lepiej rozumie AngularJS, może mi pomóc?

angularjs ng-show ng-hide Boli mnie głowa
źródło

Odpowiedzi:

375

foo.barOdniesienia nie powinny zawierać nawiasy:

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

Wyrażenia kątowe muszą znajdować się w wiązaniach nawiasów klamrowych, w przeciwieństwie do dyrektyw kątowych .

Zobacz także Omówienie szablonów kątowych .

Boli mnie głowa
źródło
76
„Wyrażenia kątowe muszą znajdować się w wiązaniach nawiasów klamrowych, w przeciwieństwie do dyrektyw kątowych”. Tamta linia. Chciałbym móc to zagłosować dwa razy.
MushinNoShin
3
Jeśli chcesz sprawdzić, czy pole ma wartość, użyj:<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>
czerasz
1
Dzięki, nie było to zbyt intuicyjne (jak widać po wszystkich głosowaniach)
Sentient
1
Dokumentacja ng-hide ( docs.quarejs.org/api/ng/directive/ngHide ) konkretnie nazywa argument wyrażeniem, co oznacza, że ​​wymaga nawiasów klamrowych. Czego tu brakuje?
Ed Norris
1
Ta odpowiedź jest w rzeczywistości nieprawidłowa. Nawiasy klamrowe wskazują, że wyrażenie należy wykonać, a jego wynik należy wstawić do DOM, podczas gdy dyrektywa może traktować wartość atrybutu jako wyrażenie w zależności od jego logiki. Niektóre dyrektywy (ngHref) obsługują nawet nawiasy klamrowe.
Vasaka,
31

Nie możesz używać, {{}}gdy używasz dyrektyw kątowych do wiązania z, ng-modelale do wiązania atrybutów innych niż kątowe musisz użyć {{}}.

Na przykład: 

ng-show="my-model"
title = "{{my-model}}"
SHIVANG SANGHI
źródło
18

Spróbuj opakować wyrażenie za pomocą: 

$scope.$apply(function() {
   $scope.foo.bar=true;
})
hrn
źródło
7
foo.bar = truepowinno być scope.foo.bar = true, aby zmienić wartośćfoo.bar
Rajkamal Subramanian
1
Miałem dziwny problem polegający na tym, że czasami był on pokazywany, a czasem nie, owijając aktualizacje zakresu w $ scope. $ Apply (function () {}); pracował dla mnie :)
nigdy nie
Jestem nowy w Angular i naprawdę wolałbym tego nie robić za każdym razem, gdy muszę ustawić zmienną. Czy ktoś może wyjaśnić, dlaczego czasami jest to potrzebne?
David
Pomocny blogu pomógł mi odpowiedzieć na to pytanie. Okazuje się, że każdy Ajax lub niestandardowi słuchacze będą mieli problemy z aktualizacją i będą wymagać$scope.$apply
davis
7

Ponieważ ng-showjest to atrybut kątowy, myślę, że nie musimy umieszczać nawiasów kwiatowych oceny ( {{}}) ..

W przypadku atrybutów takich jak classmusimy obudować zmienne nawiasami kwiatowymi oceny ( {{}}).

Rajkamal Subramanian
źródło
zamknij - zajrzałem w to i wydaje się, że wyrażenia kątowe muszą znajdować się w nawiasach klamrowych, w których dyrektywy kątowe tego nie robią
Moja głowa boli
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
źródło
0

usuń {{}} nawiasy klamrowe wokół foo.bar, ponieważ wyrażeń kątowych nie można używać w dyrektywach kątowych.

Więcej informacji: https://docs.angularjs.org/api/ng/directive/ngShow

przykład

  <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
źródło
-1

Jeśli chcesz pokazać / ukryć element w oparciu o status jednego {{wyrażenie}}, możesz użyć ng-switch:

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

Akapit będzie wyświetlany, gdy foo.bar ma wartość true, a ukryty, gdy fałsz.

Roberto
źródło