AngularJS: ng-show / ng-hid не працює з інтерполяцією `{{}}`

193

Я намагаюся показати / приховати якийсь HTML за допомогою ng-showта ng-hideфункцій, наданих AngularJS .

Згідно з документацією, відповідне використання цих функцій полягає в наступному:

ngHide - {вираз} - Якщо вираз truthy, то елемент відображається або приховується відповідно. ngShow - {вираз} - Якщо вираз truthy, елемент відображається або приховується відповідно.

Це працює для наступного використання:

<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

Дякую, це було не дуже інтуїтивно (як ви можете сказати з усіх голосів)

— Sentient

1

Документація для ng- hid ( 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

У мене виникла дивна проблема, де іноді це було б показано, а іноді - ні. Обгортання моїх оновлень області в $ range. $ Apply (function () {}); працював для мене :)

— ніколи

Я новачок у кутовій, і я дійсно краще не робити цього кожного разу, коли мені потрібно встановити змінну. Чи може хтось пояснити, чому це іноді потрібно?

— Девіс

Корисно блог допоміг мені відповісти на цей питання . Виявляється, у будь-яких слухачів Ajax або у користувальницьких служб виникнуть проблеми з оновленням і вимагається$scope.$apply

— Девіс

7

Оскільки ng-show, на мій погляд, це кутовий атрибут, нам не потрібно ставити кронштейни для оцінки ( {{}}).

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

— Rajkamal Subramanian
джерело

близько - я подивився в нього і, здається , що кутові вираження повинні бути в фігурні дужки , де кутові директиви не роблять

— 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

Якщо ви хочете показати / приховати елемент на основі статусу одного {{izraz}}, ви можете використовувати ng-switch:

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

Абзац буде відображатися, коли foo.bar є істинним, приховано, коли false.

— Роберто
джерело