©
本文档使用 PHP中文网手册 发布
ngSwitch
指令用于根据域表达式在你的模板上按条件切换DOM结构。元素内使用ngSwitch
而非ngSwitchWhen
或ngSwitchDefault
指令的地方会保留在模板中的位置。
这个指令的工作方法类似于ngInclude,然而,使用下载的模板代码替换(或从模板缓冲中载入),ngSwitch
只从嵌套元素中简单选择一个,并让根据将匹配表达式值的元素显示出来。换句话说,你定义一个包含元素 (在你放置指令的地方),放置一个表达式在 on="..."
属性 (或 ng-switch="..."
属性)上,然后在指令内定义任何内部元素,并放置when属性到每个元素上。when属性用于告诉ngSwitch当表达式计算时显示哪个元素。如果匹配的表达式没在when属性中找到,会显示default属性对应的元素。
ng-switch-when="someVal"
将匹配字符串 "someVal"
,而不会对应为表达式$scope.someVal
的值。<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 | * |
用于匹配 ng-switch-when的表达式。在子元素可添加:
|
<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>
angular.module('switchExample', ['ngAnimate'])
.controller('ExampleController', ['$scope', Function($scope) {
$scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
}]);
.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;}
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/);});