Директива AngularJS ngIf удаляет или воссоздает часть дерева DOM на основе {выражения}. Если выражение, присвоенное ngIf, оценивается как ложное значение, тогда элемент удаляется из DOM, в противном случае клон элемента повторно вставляется в DOM.
ngIf отличается от ngShow и ngHide тем, что ngIf полностью удаляет и воссоздает элемент в DOM, а не изменяет его видимость через свойство display css. Распространенным случаем, когда это различие является значительным, является использование селекторов CSS, которые полагаются на положение элемента в DOM, например псевдоклассы :first-child или :last-child.
Обратите внимание, что когда элемент удаляется с помощью ngIf, его область действия уничтожается, и при восстановлении элемента создается новая область. Область, созданная в ngIf, наследуется от родительской области, используя наследование прототипа. Важным следствием этого является то, что ngModel используется в ngIf для привязки к примитиву javascript, определенному в родительской области видимости. В этом случае любые изменения, внесенные в переменную в дочерней области, будут переопределять (скрывать) значение в родительской области.
Также, ngIf воссоздает элементы, используя их скомпилированное состояние. Примером такого поведения является то, что если атрибут класса элемента изменяется непосредственно после его компиляции, используя что-то вроде метода jQuery .addClass(), и элемент впоследствии удаляется. Когда ngIf воссоздает элемент, добавленный класс будет потерян, потому что исходное скомпилированное состояние используется для регенерации элемента.
Кроме того, вы можете предоставить анимацию через модуль ngAnimate, чтобы анимировать эффекты входа и выхода.