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

Я пытаюсь показать/скрыть некоторый 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 сможет мне помочь?

Ответ 1

Ссылка 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>

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

См. также Общие сведения о Angular Шаблонах.

Ответ 2

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

Например:

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

Подробнее: 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>

Ответ 7

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

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

Параграф будет отображаться, когда foo.bar является истинным, скрытым, когда false.