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

Анимации

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

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

Аргументы

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

ngSwitch | on

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

*

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

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

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