Улучшить эту документацию Просмотреть исходный код 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–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ng/directive/ngSwitch