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

193

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

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

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

Это работает для следующего варианта использования:

<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 сможет мне помочь?

angularjs ng-show ng-hide

— Моя голова болит
источник

375

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>

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

Смотрите также Понимание угловых шаблонов .

— Моя голова болит
источник

76

«Угловые выражения должны быть внутри фигурных скобок, в отличие от угловых директив». Эта линия прямо там. Я бы хотел, чтобы я проголосовал за это дважды.

— MushinNoShin

3

Если вы хотите проверить, имеет ли поле значение, используйте:<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>

— czerasz

1

Спасибо, это было не очень интуитивно понятно (как вы можете судить по всем

— положительным

1

Документация для ng-hide ( docs.angularjs.org/api/ng/directive/ngHide ) специально называет аргумент выражением, что означает, что для него требуются фигурные скобки. Что мне здесь не хватает?

— Эд Норрис

1

Этот ответ на самом деле не является правильным. Фигурные скобки указывают, что выражение должно быть выполнено и его результат должен быть вставлен в DOM, тогда как директива может или не может трактовать значение атрибута как выражение в зависимости от его логики. Некоторые директивы (ngHref) даже поддерживают фигурные скобки.

— Васака

31

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

Например:

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

— ШИВАНГ САНХИ
источник

18

Попробуйте обернуть выражение:

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

— грн
источник

7

foo.bar = trueдолжно быть scope.foo.bar = true, чтобы изменить значениеfoo.bar

— Rajkamal Subramanian

1

У меня была странная проблема, когда иногда это показывалось, а иногда - нет, оборачивая обновления моей области в $ scope. $ Apply (function () {}); работал для меня :)

— nevernew

Я новичок в angular, и я действительно предпочел бы не делать это каждый раз, когда мне нужно установить переменную. Может кто-нибудь объяснить, почему это иногда нужно?

— Дэвис

Полезно блог помог мне ответить на этот вопрос . Оказывается, что любой Ajax или пользовательские слушатели будут иметь проблемы с обновлением и требуют$scope.$apply

— davis

7

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

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

— Райкамаль Субраманиан
источник

близко - я посмотрел в него и, кажется , что угловые выражения должны быть в фигурные скобки , где угловые директивы не делают

— My Head Hurts

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>

— Анил Сингх
источник

0

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

Для получения дополнительной информации: 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>

— Виджай Кумар Редди
источник

-1

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

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

Абзац будет отображаться, когда foo.bar равен true, скрыт, когда false.

— Роберто
источник