本文介绍如何使用 AngularJS 中的 ngSwitch 指令配合 ngSwitchWhen 和 ngSwitchDefault 来实现视图中根据不同条件展示不同内容的效果。通过一个简单的示例，展示了当模型属性 person.name 的值变化时，页面上将显示不同的 HTML 结构。
这个指令和ng-switch-when及on="propertyName"一起使用,可以在propertyName发生变化时渲染不同指令到视图中。在下面的例子中,当person.name是Ari时,文本域下面的div会显示出来,并且这个人会获得胜利:
<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>
注意,在switch被调用之前我们用ng-switch-default来输出默认值。
扫一扫
2132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
