AngularJS: ng-show / ng-hide não funciona com interpolação `{{}}`

193

Estou tentando mostrar / ocultar algum HTML usando as funções ng-showe ng-hidefornecidas pelo AngularJS .

De acordo com a documentação, o uso respectivo para essas funções é o seguinte:

ngHide - {expression} - Se a expressão for verdadeira, o elemento será mostrado ou oculto, respectivamente. ngShow - {expression} - Se a expressão for verdadeira, o elemento será mostrado ou oculto, respectivamente.

Isso funciona para o seguinte caso de usuário:

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

No entanto, devemos usar um parâmetro de um objeto como a expressão, em seguida, o ng-hidee ng-showé dada a correta true/ falsevalor, mas os valores não são tratados como um booleano por isso sempre retornar 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>

Resultado

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

Isso é um bug ou não estou fazendo isso corretamente.

Não consigo encontrar nenhuma informação relativa sobre como referenciar parâmetros de objetos como expressões, então esperava que alguém com uma melhor compreensão do AngularJS pudesse me ajudar?

angularjs ng-show ng-hide

— Minha cabeça dói
fonte

375

A foo.barreferência não deve conter os chaves:

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

Expressões angulares precisam estar dentro das ligações entre chaves, enquanto que as diretivas angulares não.

Consulte também Noções básicas sobre modelos angulares .

— Minha cabeça dói
fonte

76

"Expressões angulares precisam estar dentro das ligações entre chaves, enquanto que as diretivas angulares não." Essa linha ali. Eu gostaria de poder votar isso duas vezes.

— MushinNoShin 13/05/2019

3

Se quiser verificar se o arquivada tem um uso valor:<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>

— czerasz

1

Obrigado, isso não foi muito intuitivo (como você pode ver com todos os votos

— positivos

1

A documentação para ng-hide ( docs.angularjs.org/api/ng/directive/ngHide ) chama especificamente o argumento de expressão, o que significa que requer chaves. O que estou perdendo aqui?

— Ed Norris

1

Esta resposta não está correta. Chaves entre chaves indicam que a expressão deve ser executada e seu resultado deve ser inserido no DOM, enquanto a diretiva pode ou não tratar o valor do atributo como uma expressão, dependendo de sua lógica. Algumas diretivas (ngHref) até suportam ligações entre chaves.

— Vasaka 25/08

31

Você não pode usar {{}}ao usar diretivas angulares para vincular, ng-modelmas para vincular atributos não angulares, você precisaria usar {{}}..

Por exemplo:

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

— SHIVANG SANGHI
fonte

18

Tente agrupar a expressão com:

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

— hrn
fonte

7

o foo.bar = truedeve ser scope.foo.bar = true, para alterar o valor defoo.bar

— Rajkamal Subramanian

1

Eu tive um problema estranho, onde algumas vezes isso seria mostrado e outras não, envolvendo minhas atualizações de escopo em $ scope. $ Apply (function () {}); trabalhou para mim :)

— nevernew

Eu sou novo em angular e eu realmente prefiro não fazer isso toda vez que precisar definir uma variável. Alguém pode explicar por que isso às vezes é necessário?

— Davis

Um post útil do blog me ajudou a responder a isso. Acontece que qualquer Ajax ou ouvintes personalizados terá problemas para atualizar e exigem um$scope.$apply

— davis

7

Como ng-showé um atributo angular, eu acho, não precisamos colocar os colchetes de avaliação ( {{}}) ..

Para atributos como classprecisamos encapsular as variáveis com colchetes de avaliação ( {{}}).

— Rajkamal Subramanian
fonte

perto - Eu olhei para ele e parece que angulares expressões precisa ser dentro de chaves, onde angulares directivas não fazer

— Minha cabeça dói

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

remova {{}} chaves ao redor do foo.bar porque expressões angulares não podem ser usadas em diretivas angulares.

Para mais: https://docs.angularjs.org/api/ng/directive/ngShow

exemplo

  <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 você deseja mostrar / ocultar um elemento com base no status de uma {{expression}}, pode usar ng-switch:

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

O parágrafo será exibido quando foo.bar for verdadeiro, oculto quando falso.

— Roberto
fonte