2013年12月27日 星期五

AngularJS 依回傳內容變換對應項目

也是最近遇到要弄的功能,有可能我們得到的 json 是這樣
  1. $scope.memberlist= [   
  2.     {type:'ou', name:'CSSI', email:[email protected]'},   
  3.     {type:'group', name:'III', email:[email protected]'},   
  4.     {type:'user', name:'Jack', email:[email protected]'},   
  5.     {type:'user',name:'Jack', email:[email protected]'}   
  6. ];  

可是我們需要根據 type 的不同給不一樣的圖片,這時候就會需要再去判斷一次。

html 長這樣
  1. <ul>  
  2.     <li ng-repeat="member in memberlist" class="clearfix">  
  3.         <img ng-src="{{type2image(member)}}">  
  4.         <div class="mem_con">{{member.name}}   
  5.             <div class="mem_mail">{{member.email}}</div>  
  6.         </div>  
  7.     </li>  
  8. </ul>  

這邊希望依 type 的不同顯示不一樣的圖,所以在家這段 function 去轉換

  1. $scope.type2image = function(item){   
  2.     return {ou:"http://www.wingzero.tw/msn/lanew/bear/lol.gif",   
  3.         group:"http://www.wingzero.tw/msn/lanew/bear/lanlanlu.gif",   
  4.         user:"http://www.wingzero.tw/msn/lanew/bear/hehe.gif"  
  5.     }[item.type]||"";   
  6. };  

Demo
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...