Ng-Show & Ng-Hide, в чем разница?

Я преподаю Angular-JS, и я не могу найти какой-либо окончательный ответ на то, что разница между ng-show и ng-hide есть. Для меня они кажутся функционально эквивалентными.Ng-Show & Ng-Hide, в чем разница?

Я понимаю разницу между ними и ng-if, так как ng-if фактически удаляет наблюдателей и т. Д., В то время как шоу и скрыть, похоже, служат той же цели.

Есть ли какой-либо прирост производительности, использующий один над другим, или существуют ситуации, когда один предпочтительнее другого OR, это только две стороны одной и той же монеты, и вы используете то, что более логично для вас?

Извините, если об этом спросили/ответили в другом месте, но я не смог его найти.

источник

2015-11-16 Vistari

Возможный дубликат [AngularJs: нг-шоу/нг скрыть] (HTTP://stackoverflow.com/questions/12599637/angularjs-ng-show-ng-hide) – jmugz3

Его дубликат нет, первый из них - проблема с использованием show and hide, вторая - использование NG-IF, а не шоу или скрыть. Я спрашиваю, есть ли разница между шоу и скрыть, я понимаю разницу между NG-IF и NG-Show/hide. Я даже поместил это в свой вопрос. – Vistari

Вы правы в отношении второго. Я удалил его. Но первый очень похож. Оба (ng-show/ng-hide) имеют почти одинаковые css. Разница заключается в анимации. – jmugz3

Они делают противоположное друг от друга и могут использоваться по вашему желанию.

Я думаю, что это сводится к предпочтению кодирования, поскольку некоторым людям нравится писать свой код, чтобы использовать метод, если значение будет истинным, вместо использования не false!

<div ng-show="true">

вместо:

<div ng-hide="!true">

источник

2015-11-16 16:00:14

Спасибо, как я думал, функционально эквивалентны и просто привилегированы, спасибо большое! :) – Vistari

ng-show и ng-hide просто установить дисплей на 'Нет', но на самом деле ng-if удаляет элемент из DOM.

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

источник

2015-11-16 16:00:41

ng-show и ng-hide применяет display: none !important к вашему html с помощью одной из этих директив. Нет никакой разницы между ng-show и ng-hide: это только семантический и ваш выбор.

Итак, давайте предположим, что у вас есть следующий HTML:

<div ng-show='condition'><p>{{text}}</p></div>

<div ng-hide='condition'><p>{{text}}</p></div>

Так что в этом случае, если ваше состояние является true, то первая строка кода показывает ваш HTML и скрывает его, если ваше состояние false.Вторая линия с ng-hide будет делать то же самое, но с противоположными условиями: он скрывает ваш HTML, если ваше состояние true и показывает, если условие false

источник

2015-11-16 16:02:21 Andrew

применяется класс 'ng-hide', а не стили –

Эти директивы отличаются в одном ряду:

ngShowDirective:

$animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, { 
     tempClasses: NG_HIDE_IN_PROGRESS_CLASS 
    });

ngHideDirective:

$animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, { 
     tempClasses: NG_HIDE_IN_PROGRESS_CLASS 
    });

Против применения ng-hide Класс CSS.

Как вы можете видеть, есть NG_HIDE_IN_PROGRESS_CLASS.
Это ng-hide-animate класс css, который временно применяется в обоих случаях.
Вы можете использовать его, чтобы анимированный элемент отображался/исчезал.
Вы должны использовать два селекторы для реализации двунаправленной анимации:

.animate-hide для появляются
.animate-hide.ng-hide для шкурой

источник

2015-11-16 16:06:50

ответ

Смежные вопросы