貼上幾個有關Filter使用的幾個示例。
1. 首先創建一個表格
<body ng-app="app"> <div class="divAll" ng-controller="tableFilter"> <input type="text" placeholder="輸入你要搜索的內容" ng-model="key"> <br><br> <table cellspacing="0"> <thead> <tr> <th>名稱</th> <th>價格</th> <th>上架時間</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>{{g.name}}</td> <td>{{g.price}}</td> <td>{{g.inTime}}</td> <td>{{g.desc}}</td> </tr> </tbody> </table> </div> <script src="js/angular.min.js"></script> <script> var app = angular.module('app',[]); app.controller('tableFilter',function($scope){ $scope.goods = [ {name:"HTML5",price:20,inTime:1488785356895,desc:"HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定。"}, //時間秒數由 new Date().getTime();獲得 {name:"JavaScript",price:30,inTime:1488685355895,desc:"JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。"}, {name:"CSS3",price:25,inTime:1468785355895,desc:"CSS即層疊樣式表。"}, {name:"AngularJS",price:50,inTime:1482785355895,desc:"AngularJS 是一款優秀的前端JS框架，被用于Google的多款產品當中。。"} ]; } </script> 加上樣式，顯示如圖
2. 看到價格個時間顯示怪怪的，好，修改一下表格。
<td>{{g.name}}</td> <td>{{g.price | currency}}</td> <!--currency:貨幣--> <td>{{g.inTime | date:'yyyy-MM-dd'}}</td> <!--將秒數改成日期格式 年-月-日--> <td>{{g.desc}}</td> 重新運行
3. 這樣一下，確實不礙眼了。但是描述太長了吧，能不能超過一定字數，就不顯示了，以...結尾？
好，在表格里加上過濾器，就叫descFilter。字數顯示。注意別忘了 ' | ' 過濾器符號。
<td>{{g.desc | descFilter : 10}}</td> 然后在js中為descFilter寫上方法
//定義一個過濾器，過濾desc里面的字數，多余十個字的部分省略顯示 app.filter('descFilter',function(){ return function(content,num){ //傳兩個參數，一個對應內容，一個對應長度 if(content.length > num){ content = content.substring(0,num) + "..."; } return content; } }); 運行看看
可以了。厲害。
4. 搜索框沒用嗎。別忘了，我們給它附上了ng-model="key",
好，修改一下tr。加上filter條件
<tr ng-repeat="g in goods | filter : key">
.保存運行，在里面搜索內容試試呢
。好神奇，好厲害的Filter.
5.不能按價格排序嗎？當然可以。而且不僅升序還能降序。
給價格那個標題加上升降按鈕