©
Dieses Dokument verwendetPHP-Handbuch für chinesische WebsitesFreigeben
ngSwitch指令用于根据域表达式在你的模板上按条件切换DOM结构。元素内使用ngSwitch而非ngSwitchWhen或ngSwitchDefault指令的地方会保留在模板中的位置。
这个指令的工作方法类似于ngInclude，然而，使用下载的模板代码替换(或从模板缓冲中载入)，ngSwitch只从嵌套元素中简单选择一个，并让根据将匹配表达式值的元素显示出来。换句话说，你定义一个包含元素 (在你放置指令的地方),放置一个表达式在on="..."属性(或ng-switch="..."属性)上，然后在指令内定义任何内部元素，并放置when属性到每个元素上。when属性用于告诉ngSwitch当表达式计算时显示哪个元素。如果匹配的表达式没在when属性中找到，会显示default属性对应的元素。
ng-switch-when="someVal"将匹配字符串
"someVal"，而不会对应为表达式
$scope.someVal的值。
ng-switch="expression">ng-switch-when="matchValue1">...ng-switch-when="matchValue2">...ng-switch-default>... enter - 在ngSwitch的内容改变并匹配到内部子元素后发生。
leave - 只在ngSwitch内容改变后并在原内容从DOM移除前发生。
点击这里 了解更多关于涉及动画的步骤。| 参数 | 类型 | 详述 |
|---|---|---|
| ngSwitch | on | * | 用于匹配ng-switch-when的表达式。在子元素可添加：
|
ng-controller="ExampleController">ng-model="selection"ng-options="item for item in items">selection={{selection}}
class="animate-switch-container"ng-switchon="selection">class="animate-switch"ng-switch-when="settings">Settings 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:1pxsolid 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;}varswitchElem=element(by.css('[ng-switch]'));varselect=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/);});