AngularJS: ng-show / ng-hide не работает с интерполяцией' {}}

Я пытаюсь показать / скрыть некоторые HTML с помощью ng-show и ng-hide функции AngularJS.

согласно документации, соответствующее использование этих функций выглядит следующим образом:

ngHide - {expression} - если выражение истинно, то элемент отображается или скрыт соответственно. ngShow - {expression} - если выражение истинно, то элемент отображается или скрыт соответственно.

это работает для следующего usecase:

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

однако, если мы используем параметр из объекта в качестве выражения, то ng-hide и ng-show дана правильная true/false значение, но значения не рассматриваются как логические, поэтому всегда возвращайте false:

источник

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

результат

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

это либо ошибка, либо я этого не делаю правильно.

Я не могу найти никакой относительной информации о ссылках на параметры объекта в виде выражений, поэтому я надеялся, что кто-нибудь с лучшим пониманием AngularJS сможет мне помочь?

7 193
angularjs ng-show ng-hide

7 ответов:

The foo.bar ссылка не должна содержать скобки:

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

Угловое выражения должны быть в пределах фигурной скобки привязки, где как угловой директивы нет.

см. также Понимание Угловых Шаблонов.

373

вы не можете использовать {{}} при использовании угловых директив для связывания с ng-model но для привязки неугловых атрибутов вам придется использовать {{}}..

например: 

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

попробуйте обернуть выражение с помощью: 

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

С ng-show Это угловой атрибут я думаю, нам не нужно ставить оценки цветок скобки ({{}})..

для таких атрибутов, как class нам нужно инкапсулировать переменные с помощью оценочных цветочных скобок ({{}}).

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

удалите {{}} скобки вокруг foo.бар, потому что угловые выражения не могут использоваться в угловых директивах.

Подробнее:https://docs.angularjs.org/api/ng/directive/ngShow

пример

  <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

Если вы хотите показать/скрыть элемент на основе состояния одного {{выражение}} Вы можете использовать ng-switch:

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

абзац будет отображаться, когда foo.бар истинен, скрыт, когда ложь.

-1