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

директива в модуле ng

Обзор

Директива ngSwitch используется для условной смены структуры DOM на вашей шаблоне на основе выражения области видимости. Элементы внутри ngSwitch но без директивы ngSwitchWhen или ngSwitchDefault будут сохранены в указанном в шаблоне месте.

Сама директива работает аналогично ngInclude, но вместо загрузки кода шаблона (или загрузки его из кэша шаблона), ngSwitch просто выбирает один из вложенных элементов и делает его видимым в зависимости от того, какой элемент соответствует значению, полученному из вычисленного выражения. Другими словами, вы определяете контейнерный элемент (куда помещаете директиву), помещаете выражение в атрибут on="..." (или атрибут ng-switch="..."), определяете любые внутренние элементы внутри директивы и помещаете атрибут when в каждый элемент. Атрибут when используется для информирования ngSwitch о том, какой элемент отображать, когда вычисляется выражение on. Если соответствующее выражение не найдено через атрибут when, то отображается элемент с атрибутом default.

Обратите внимание, что значения атрибутов для сопоставления не могут быть выражениями. Они интерпретируются как буквальные строковые значения для сопоставления. Например, ng-switch-when="someVal" будет соответствовать строке "someVal", а не значению выражения $scope.someVal.

Информация о директиве

Эта директива создаёт новую область видимости.
Эта директива выполняется на уровне приоритета 1200.

Использование

<ANY ng-switch="expression">
  <ANY ng-switch-when="matchValue1">...</ANY>
  <ANY ng-switch-when="matchValue2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>

Аргументы

Параметр Тип Подробности

ngSwitch | on

Параметр	Тип	Подробности
ngSwitch \| on	`*`	выражение для сопоставления с `ng-switch-when`. К дочерним элементам добавьте: `ngSwitchWhen`: выражение условия для сопоставления. Если совпадение найдено, то этот случай будет отображен. Если такое же совпадение встречается несколько раз, все элементы будут отображены. Можно назначить несколько значений одному и тому же `ngSwitchWhen` путём определения необязательного атрибута `ngSwitchWhenSeparator`. Разделитель будет использован для разделения значения атрибута `ngSwitchWhen` на несколько токенов, и элемент будет отображаться, если какое-либо из `ngSwitch` совпадает с любым из этих токенов. `ngSwitchDefault`: значение по умолчанию, если ни один из других случаев не соответствует. Если существует несколько случаев по умолчанию, все они будут отображаться, когда ни один другой случай не соответствует.

*

выражение для сопоставления с ng-switch-when. К дочерним элементам добавьте:

ngSwitchWhen: выражение условия для сопоставления. Если совпадение найдено, то этот случай будет отображен. Если такое же совпадение встречается несколько раз, все элементы будут отображены. Можно назначить несколько значений одному и тому же ngSwitchWhen путём определения необязательного атрибута ngSwitchWhenSeparator. Разделитель будет использован для разделения значения атрибута ngSwitchWhen на несколько токенов, и элемент будет отображаться, если какое-либо из ngSwitch совпадает с любым из этих токенов.
ngSwitchDefault: значение по умолчанию, если ни один из других случаев не соответствует. Если существует несколько случаев по умолчанию, все они будут отображаться, когда ни один другой случай не соответствует.

Анимации

Анимация	Происходит
enter	после изменения содержимого ngSwitch и размещения соответствующего дочернего элемента внутри контейнера
leave	после изменения содержимого ngSwitch и непосредственно перед удалением предыдущего содержимого из DOM

Нажмите здесь, чтобы узнать больше о этапах анимации.

Примеры

© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.7.8/docs/api/ng/directive/ngSwitch