Улучшить эту документацию Просмотреть исходный код 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.6.9/docs/api/ng/directive/ngSwitch