ionic开发中, 通过点击某个按钮切换不同的布局的情况经常遇到, 下面就简单介绍一下如何实现这一功能;
一.ng-switch切换布局(这个属于控件的特性, 就不多介绍, 直接上代码)
<select ng-model="myVar">
<option value="runoob">www.runoob.com
<option value="google">www.google.com
<option value="taobao">www.taobao.com
</select>
<hr>
<div ng-switch="myVar">
<div ng-switch-when="runoob">
<h1>菜鸟教程</h1>
<p>欢迎访问菜鸟教程</p>
</div>
<div ng-switch-when="google">
<h1>Google</h1>
<p>欢迎访问Google</p>
</div>
<div ng-switch-when="taobao">
<h1>淘宝</h1>
<p>欢迎访问淘宝</p>
</div>
<div ng-switch-default>
<h1>切换</h1>
<p>选择不同选项显示对应的值。</p>
</div>
</div>
<hr>
<p>ng-switch 指令根据当前的值显示或隐藏对应部分</p>
二. 通过ng-class改变css样式
一般用法:
js:
一般用法:
function changeClass(){
$scope.className = true/false;
}
h5:
<div ng-class="{true:'trueStyle',false:'falseStyle'}[className]"></div>
参考:
ng-class改变css样式
