Улучшить эту документацию Просмотреть исходный код ngShow

директива в модуле ng

Обзор

Директива ngShow отображает или скрывает заданный HTML-элемент, основываясь на выражении, предоставленном атрибуту ngShow.

Элемент отображается или скрывается путём удаления или добавления класса .ng-hide CSS к элементу. Класс .ng-hide CSS предопределён в AngularJS и устанавливает стиль отображения в none (используя флаг !important). Для режима CSP добавьте angular-csp.css в ваш HTML-файл (см. ngCsp).

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="myValue"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="myValue" class="ng-hide"></div>

Когда выражение ngShow принимает ложное значение, к атрибуту класса элемента добавляется класс .ng-hide, делая его скрытым. При истинном значении класс .ng-hide удаляется, и элемент становится видимым.

Зачем используется !important?

Вы, возможно, задаётесь вопросом, почему используется !important для класса .ng-hide CSS. Это связано с тем, что селектор .ng-hide может быть легко переопределён более сильными селекторами. Например, простое изменение стиля отображения элемента списка HTML может привести к тому, что скрытые элементы станут видимыми. Эта проблема ещё больше усугубляется при работе с CSS-фреймворками.

Используя !important, поведение отображения и скрытия будет работать как ожидается, несмотря на любые конфликты между специфичностью селекторов CSS (при условии, что !important не используется с конфликтующими стилями). Если разработчик решит переопределить стили для изменения способа скрытия элемента, то всё, что нужно сделать, — это использовать !important в собственном CSS-коде.

Переопределение .ng-hide

По умолчанию класс .ng-hide стилизует элемент со стилем display: none !important. Если вы хотите изменить поведение скрытия с ngShow/ngHide, вы можете просто переопределить стили для класса .ng-hide CSS. Обратите внимание, что для работы с дополнительными классами анимации необходимо использовать селектор .ng-hide:not(.ng-hide-animate).

.ng-hide:not(.ng-hide-animate) {
  /* These are just alternative ways of hiding an element */
  display: block!important;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

По умолчанию, вам не нужно ничего переопределять в CSS, и анимации будут работать вокруг стиля отображения.

Информация о директиве

Эта директива выполняется на уровне приоритета 0.
Эта директива может использоваться как многоэлементная

Использование

как элемент:

<ng-show
  ng-show="expression">
...
</ng-show>

как атрибут:
```
<ANY
  ng-show="expression">
...
</ANY>
```

Аргументы

Параметр	Тип	Подробности
ngShow	`expression`	Если выражение выражение истинно/ложно, то элемент отображается/скрывается соответственно.

Анимации

Анимация	Происходит
addClass `.ng-hide`	После того, как выражение `ngShow` принимает ложное значение и перед тем, как содержимое будет скрыто.
removeClass `.ng-hide`	После того, как выражение `ngShow` принимает истинное значение и перед тем, как содержимое будет отображено.

Анимации в ngShow/ngHide работают с событиями отображения и скрытия, которые срабатывают, когда выражение директивы принимает значения true и false. Эта система работает аналогично системе анимации в ngClass, за исключением того, что вам также необходимо включить флаг !important, чтобы переопределить свойство display, чтобы элементы не были фактически скрыты во время анимации.

/* A working example can be found at the bottom of this page. */
.my-element.ng-hide-add, .my-element.ng-hide-remove {
  transition: all 0.5s linear;
}

.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }

Обратите внимание, что начиная с версии AngularJS 1.3, нет необходимости изменять свойство display на block во время состояний анимации — ngAnimate автоматически будет обрабатывать переключение стилей для вас.

Нажмите здесь, чтобы узнать больше о шагах, вовлечённых в анимацию.

Примеры

Простой пример, анимирующий непрозрачность элемента:

Более сложный пример, включающий разные анимации отображения/скрытия:

© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.6.9/docs/api/ng/directive/ngShow