AngularJS: ng-show / ng-hide non funziona con l'interpolazione `{{}}`

193

Sto cercando di mostrare / nascondere un po 'di HTML utilizzando le funzioni ng-showe ng-hidefornite da AngularJS .

Secondo la documentazione, i rispettivi usi per queste funzioni sono i seguenti:

ngHide - {espressione} - Se l'espressione è veritiera, allora l'elemento viene mostrato o nascosto rispettivamente. ngShow - {espressione} - Se l'espressione è vera, l'elemento viene mostrato o nascosto rispettivamente.

Questo funziona per il seguente caso d'uso:

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

Tuttavia, dovremmo utilizzare un parametro da un oggetto come espressione, quindi a ng-hidee ng-showviene fornito il valore true/ falsevalore corretto , ma i valori non vengono trattati come booleani, quindi restituiscono sempre false:

fonte

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

Risultato

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

Questo è un bug o non lo sto facendo correttamente.

Non riesco a trovare alcuna informazione relativa sul riferimento ai parametri degli oggetti come espressioni, quindi speravo che qualcuno con una migliore comprensione di AngularJS potesse aiutarmi?

angularjs ng-show ng-hide

— Mi fa male la testa
fonte

375

Il foo.barriferimento non deve contenere le parentesi graffe:

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

Le espressioni angolari devono essere all'interno dei vincoli di parentesi graffe, come non fanno le direttive angolari .

Vedi anche Comprensione dei modelli angolari .

— Mi fa male la testa
fonte

76

"Le espressioni angolari devono essere all'interno dei vincoli di parentesi graffe, dove non lo sono le direttive angolari." Quella linea proprio lì. Vorrei poter votare questo due volte.

— MushinNoShin

3

Se si desidera verificare se il file ha un valore utilizzare:<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>

— czerasz

1

Grazie, questo non era molto intuitivo (come si può dire da tutti i voti

— positivi

1

La documentazione per ng-hide ( docs.angularjs.org/api/ng/directive/ngHide ) chiama specificamente l'argomento un'espressione, il che significa che richiede parentesi graffe. Cosa mi sto perdendo qui?

— Ed Norris,

1

Questa risposta in realtà non è corretta. Le parentesi graffe indicano che l'espressione deve essere eseguita e il suo risultato deve essere inserito nel DOM, mentre la direttiva può o meno trattare il valore dell'attributo come un'espressione a seconda della sua logica. Alcune direttive (ngHref) supportano persino le associazioni di parentesi graffe.

— Vasaka,

31

Non è possibile utilizzare {{}}quando si utilizzano le direttive angolari per l'associazione ng-modelma per l'associazione di attributi non angolari che è necessario utilizzare {{}}.

Per esempio:

ng-show="my-model"
title = "{{my-model}}"

— SHIVANG SANGHI
fonte

18

Prova a racchiudere l'espressione con:

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

— HRN
fonte

7

l' foo.bar = truedovrebbe essere scope.foo.bar = true, per modificare il valore difoo.bar

— Rajkamal Subramanian

1

Ho avuto uno strano problema in cui a volte veniva mostrato e talvolta no, avvolgendo i miei aggiornamenti di ambito in $ scope. $ Apply (function () {}); ha funzionato per me :)

— mai il

Sono nuovo di angolare e preferirei davvero non farlo ogni volta che devo impostare una variabile. Qualcuno può spiegare perché a volte questo è necessario?

— davis,

Un utile post sul blog mi ha aiutato a rispondere a questa domanda. Risulta che qualsiasi Ajax o ascoltatori personalizzati avranno problemi di aggiornamento e richiedono a$scope.$apply

— davis il

7

Dal momento che ng-showè un attributo angolare penso, non abbiamo bisogno di mettere le parentesi di fiori di valutazione ( {{}}) ..

Per attributi come classabbiamo bisogno di incapsulare le variabili con parentesi quadre di valutazione ( {{}}).

— Rajkamal Subramanian
fonte

vicino - Ci ho guardato dentro e sembra che le espressioni angolari debbano essere racchiuse tra parentesi graffe dove le direttive angolari non lo fanno

— mia testa fa male

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
fonte

0

rimuovere {{}} parentesi graffe attorno a foo.bar perché le espressioni angolari non possono essere utilizzate nelle direttive angolari.

Per ulteriori informazioni: https://docs.angularjs.org/api/ng/directive/ngShow

esempio

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

-1

Se vuoi mostrare / nascondere un elemento in base allo stato di una {{espressione}} puoi usare ng-switch:

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

Il paragrafo verrà visualizzato quando foo.bar è true, nascosto quando false.

— Roberto
fonte