Есть много способов управлять наличием некоторых элементов на основе критериев на веб-сайте. Исходя из реальной ситуации, я обычно использую для этих целей ngSwitch, ngIf и ngShow. Давайте посмотрим, чем они отличаются.
Как работать
Первое различие между ngSwitch, ngIf и ngShow заключается в том, как они управляют видимостью элемента.
- ngShowдобавляет класс ng-hide к элементу, когда критерий ложный, и наоборот, удаляет его, когда критерий истинен.
- ngIf гораздо сложнее. Он отображает содержимое внутри элемента на основе критериев. Когда критерии ложны, это результат
- ngSwitch очень похож на использование регистра переключателей в html путем объединения ngSwitchс ngSwitchWhen(если имеется более одного случая с похожим действием, ngSwitchWhenSeparator. Способ, которым ngSwitch управляет элементом, такой же, как ngIf.
Влияние на объем
Из-за того, как они работают, вы должны соблюдать осторожность при связывании ngModel внутри них. ngSwitch и ngIfпредоставят дочернюю область из текущей на основе существования, в то время как ngShowвсе еще использует ту же область, что и текущая.
Например, у нас есть модель name для области видимости, и мы привязываем ее к трем разным входам внутри ngShow, ngSwitch и ngIf. Давайте назовем name1 представителем name внутри ngIfили ngSwitch. У нас есть 3 разных сценария:
- В первый раз (когда ngIf или ngSwitch просто визуализирует область действия), name1 будет отражать изменения из name.
- При изменении значения name1 name не отразится на изменении.
- После сценария #2 связь между name и name1 исчезает. Если вы измените name сейчас, name1 не изменится.
Чтобы выполнить привязку к правильной модели, вы должны использовать $parent для выбора правильной модели. В приведенном выше примере это $parent.name.
Вы можете убедиться в этом непосредственно с этим плункером.
