Использование ng-show и ng-hide в AngularJS

Я знаю о разнице между ng-show и ng-hide, но в интервью мне задали вопрос: зачем нам нужен ng-hide, если у нас есть ng-show, потому что мы знаем, что оба показывают или скрывают данный элемент HTML на основе на их значениях, которые могут быть истинными или ложными. По какой причине мы должны отдавать предпочтение ng-show вместо ng-hide или наоборот?


angularjs using-directives
person Ritesh Puri    schedule 27.07.2017    source источник
comment
Я бы сказал, что это просто разные предпочтения - иногда вы хотите скрыть элемент только в определенном сценарии, в других случаях вы хотите показать его только в определенных обстоятельствах.   -  person Yatin    schedule 28.07.2017

Ответы (3)


arrow_upward
4
arrow_downward

Читаемость.

ng-show="feature.enabled" более читаем, чем ng-hide="!feature.enabled". Двойное отрицание труднее понять.

person JB Nizet    schedule 27.07.2017

arrow_upward
2
arrow_downward

Следует отметить, что ng-show и ng-hide не удаляют и не создают элементы DOM, а просто переключают их отображение или нет с помощью css.

Таким образом, легко переключать один элемент, оставляя другой скрытым в DOM, и, конечно, они обеспечивают удобочитаемость, как было сказано ранее.

<p ng-show="guess === number">Correct</p>
<p ng-hide="guess === number">Incorrect</p>
person w-robot    schedule 27.07.2017

arrow_upward
2
arrow_downward

ng-hide имеет приоритет над ng-show. Поэтому, если вы хотите, вы можете объединить их и предоставить им два разных условия, если вы хотите переопределить ng-show с ng-hide по какой-либо причине. Я бы лично посоветовал этого не делать, поскольку вы можете просто указать несколько условий для одной директивы для достижения того, что вам нужно.

Пример:

<h1>Good dogs</h1>
<div ng-repeat="dog in $ctrl.getDogs()" ng-show="dog.isGoodBoy()" ng-hide="dog.isBadBoy()">
    <p>{{dog.name}} is a good boy.</p>
</div>
person H Tom    schedule 27.07.2017
comment
Не могли бы вы предоставить пример фрагмента, объясняющего этот вариант использования? - person mattjegan; 28.07.2017
comment
Добавил пример. - person H Tom; 28.07.2017