貼上幾個有關Filter使用的幾個示例。

十載的象州網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整象州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“象州網(wǎng)站設計”,“象州網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

1. 首先創(chuàng)建一個表格

 
 
 
  
 

 
 
 
 
 
  
 
  
名稱
 
  
價格
 
  
上架時間
 
  
描述
 
  
 
 
 
 
 
  
 
  
{{g.name}}
 
  
{{g.price}}
 
  
{{g.inTime}}
 
  
{{g.desc}}
 
  
 
 
 
 
 
 
 
 

加上樣式，顯示如圖

2. 看到價格個時間顯示怪怪的，好，修改一下表格。

{{g.name}} 
{{g.price | currency}}  
{{g.inTime | date:'yyyy-MM-dd'}}  
{{g.desc}} 

重新運行

3. 這樣一下，確實不礙眼了。但是描述太長了吧，能不能超過一定字數(shù)，就不顯示了，以...結(jié)尾？

好，在表格里加上過濾器，就叫descFilter。字數(shù)顯示。注意別忘了 ' | ' 過濾器符號。

{{g.desc | descFilter : 10}} 

然后在js中為descFilter寫上方法

//定義一個過濾器，過濾desc里面的字數(shù)，多余十個字的部分省略顯示 
app.filter('descFilter',function(){ 
 return function(content,num){ //傳兩個參數(shù)，一個對應內(nèi)容，一個對應長度 
 if(content.length > num){ 
  content = content.substring(0,num) + "..."; 
 } 
 return content; 
 } 
}); 

運行看看

可以了。厲害。

4. 搜索框沒用嗎。別忘了，我們給它附上了ng-model="key",

好，修改一下tr。加上filter條件

.保存運行，在里面搜索內(nèi)容試試呢

。好神奇，好厲害的Filter.

5.不能按價格排序嗎？當然可以。而且不僅升序還能降序。

給價格那個標題加上升降按鈕

價格   

。修改一下js 

 $scope.isAsc = false; //定義isAsc變量為false，默認升序; 
 $scope.sort = function(){ 
  $scope.isAsc = !$scope.isAsc; //升降切換 
 }

 
 
 

4 。更新一下過濾排序條件
 

 

 
 
再次運行。升序降序都可以。大功告成！
 

 
 

 
 

以上所述是小編給大家介紹的AngularJS的Filter的示例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！