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

Директива ngShow показывает или скрывает заданный HTML-элемент на основе выражения, переданного атрибуту ngShow. Элемент отображается или скрывается путём удаления или добавления CSS-класса .ng-hide к элементу. Класс .ng-hide предопределён в 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?

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

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

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

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

.ng-hide {
//this is just another form of hiding an element
display:block!important;
position:absolute;
top:-9999px;
left:-9999px;
}

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

Примечание об анимациях с ngShow

Анимации в ngShow/ngHide работают с событиями отображения и скрытия, которые срабатывают, когда выражение директивы истинно и ложно. Эта система работает как система анимации с 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:0.5s linear all;
}

.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.2.17 (и 1.3.0-beta.11), нет необходимости изменять свойство display на block во время анимационных состояний — ngAnimate автоматически обрабатывает переключение стилей.