Улучшить эту документацию Посмотреть исходный код 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 и размещения соответствующего дочернего элемента внутри контейнера
выход	после изменения содержимого ngSwitch и непосредственно перед удалением предыдущего содержимого из DOM

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

Аргументы

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

ngSwitch | on

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

*

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

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

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