AngularJS: API: ng/directive/ngSwitch

ngSwitch

- directive in module ng

ngSwitch指令用于根据域表达式在你的模板上按条件切换DOM结构。元素内使用ngSwitch而非ngSwitchWhen或ngSwitchDefault指令的地方会保留在模板中的位置。

这个指令的工作方法类似于ngInclude，然而，使用下载的模板代码替换(或从模板缓冲中载入)，ngSwitch只从嵌套元素中简单选择一个，并让根据将匹配表达式值的元素显示出来。换句话说，你定义一个包含元素 (在你放置指令的地方),放置一个表达式在 on="..." 属性 (或 ng-switch="..." 属性)上，然后在指令内定义任何内部元素，并放置when属性到每个元素上。when属性用于告诉ngSwitch当表达式计算时显示哪个元素。如果匹配的表达式没在when属性中找到，会显示default属性对应的元素。

注意用于匹配的属性值不能是表达式。他们被解释为字符串值进行匹配。例如，ng-switch-when="someVal" 将匹配字符串 "someVal" ，而不会对应为表达式$scope.someVal的值。

指令信息

这个指令会创建新的作用域(scope)。
这个指令执行优先级为800.

用法

<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: 当没有状况匹配到时的默认状况。如果有多个默认状况，所有都会显示。

示例

index.html

<div ng-controller="ExampleController">
  <select ng-model="selection" ng-options="item for item in items">
  </select>
  <tt>selection={{selection}}</tt>
  <hr/>
  <div class="animate-switch-container"
    ng-switch on="selection">
      <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
      <div class="animate-switch" ng-switch-when="home">Home Span</div>
      <div class="animate-switch" ng-switch-default>default</div>
  </div>
</div>

script.js

angular.module('switchExample', ['ngAnimate'])
  .controller('ExampleController', ['$scope', Function($scope) {
    $scope.items = ['settings', 'home', 'other'];
    $scope.selection = $scope.items[0];
  }]);

animations.css

.animate-switch-container {
  position:relative;
  background:white;
  border:1px solid black;
  height:40px;
  overflow:hidden;}

.animate-switch {
  padding:10px;}

.animate-switch.ng-animate {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;}

.animate-switch.ng-leave.ng-leave-active,.animate-switch.ng-enter {
  top:-50px;}.animate-switch.ng-leave,.animate-switch.ng-enter.ng-enter-active {
  top:0;}

protractor.js

var switchElem = element(by.css('[ng-switch]'));
var select = element(by.model('selection'));

it('should start in settings', Function() {
  expect(switchElem.getText()).toMatch(/Settings Div/);});
it('should change to home', Function() {
  select.all(by.css('option')).get(1).click();
  expect(switchElem.getText()).toMatch(/Home Span/);});
it('should select default', Function() {
  select.all(by.css('option')).get(2).click();
  expect(switchElem.getText()).toMatch(/default/);});