雙點後根據不同內容滑動出現視窗 使用 AngularJS

最近在做 UI 的時候有討論到希望盡量不要使用彈出視窗，於是想到用類似 mobile 的滑出頁，這次就用 Angular 實作看看。

準備 json 的 list ，我分成三類，等等會根據點到類別的不同開不一樣的滑出頁。

view plaincopy to clipboardprint

1. $scope.list = [   
2.         {   
3.             type: 'type1',   
4.             name: 'Jason',   
5.             description: '[email protected]'  
6.         },   
7.         {   
8.             type: 'type2',   
9.             name: 'Jack',   
10.             description: '[email protected]'  
11.         },   
12.         {   
13.             type: 'type3',   
14.             name: 'Tom',   
15.             description: '[email protected]'  
16.         }   
17.     ];  

用 ng-repeat 把 DOM 產出來

view plaincopy to clipboardprint

1. <ul>  
2.     <li ng-repeat="list in list" ng-dblclick="showDetail($index)">  
3.         <div>{{list.name}}</div>  
4.         <div class="description">{{list.description}}</div>  
5.     </li>          
6. </ul>  

準備要滑出的頁面

view plaincopy to clipboardprint

1. <div class="edit type1" ng-class="{type1: 'active', type2: '', type3: '', '':''}[detail_block]">  
2.     <div class="title">Type 1</div>  
3.     <div class="content"></div>  
4.     <div class="footer">  
5.             <a class="btn" ng-click="hideEditBlock()">Save</a>  
6.     </div>  
7. </div>  

動畫是使用 css 完成的，基本原理就是外面用一層 div 包住，並設 overflow=hidden ，這樣超出去的範圍就看不到了，然後在雙點後，加上 active 這個 class 讓頁面跑出來，並使用 css 的 transition ，就會自動變成動畫了。

因為我要根據不同的內容滑出不同的頁面，所以用 ng-class 去判斷:
ng-class="{type1: 'active', type2: '', type3: '', '':''}[detail_block]" ，這邊的意思是我設一個 detail_block 的變數，當變數=type1 ，就會附加 active 這個 class 上去，其他類推。

我覺得 Angular 在這邊很神奇，切換變數後就可以控制 css 了，這邊判斷點到的項目的 type 是什麼改變變數。

view plaincopy to clipboardprint

1. $scope.detail_block="";   
2.     $scope.showDetail=function($index){   
3.         $type=$scope.list[$index].type;   
4.         if($type=="type1"){   
5.             $scope.detail_block="type1";   
6.         }else if($type=="type2"){   
7.             $scope.detail_block="type2";   
8.         }else{   
9.             $scope.detail_block="type3";   
10.     }   
11. }  

最後加一個讓頁面收回去的控制，只要把變數給清空就可以了

view plaincopy to clipboardprint

1. $scope.hideEditBlock=function(){   
2.     $scope.detail_block="";   
3. }  

Demo