ionic页面切换不同布局(ng-class改变css样式)

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样式