頁面：

<div><input style="width:90%;margin-left:5px;margin-right:5px;" class="form-control sys_input" ng-model="imagePaths.filter.imageName" placeholder="查詢..."/> </div> <div><!--<ul ng-repeat="item in imagePaths.imageinfo | filter:imagePaths.filter"><li><img width="40px" height="40px" ng-src="http://127.0.0.1:8099/{{item.imageName}}">{{item.imageLength/1024 | number:0}}KB<a href="http://127.0.0.1:8099/{{item.imageName}}" target="_blank">{{item.imageName}}</a><button type="button" ng-click="imageDownload(item)">下載</button></li></ul>--><table class="table table-hover table-bordered" style="width:90%;margin-left:5px;margin-right:5px;"><tbody><tr ng-repeat="item in imagePaths.imageinfo | filter:imagePaths.filter|paging:imagePaths.page.index:imagePaths.page.size" style="height:30px;"><td><img ng-src="http://127.0.0.1:8099/{{item.imageName}}"></td><td>{{item.imageLength/1024 | number:0}}KB</td><td>{{item.imageName}}</td><td><button type="button" class="btn btn-warning btn-sm" ng-click="imageDownload(item.imageName)">下載</button></td></tr></tbody> </table><div class="pull-center" style="width:90%;margin-left:5px;margin-right:5px;"><pagination total-items="imagePaths.imageinfo|filter:imagePaths.filter|size" ng-model="imagePaths.page.index" max-size="3"items-per-page="imagePaths.page.size"class="pagination-sm pull-right" boundary-links="true" previous-text="上頁" next-text="下頁" first-text="首頁" last-text="末頁"></pagination></div> </div>

?

這里主要說的是查詢的數據結構：$scope.imagePaths=

{"imageinfo":

[{imageLength:?"19505",imageName:?"company_logo.png"}，

{imageLength:?"116010",imageName:?"crashed_icon.png"}，

{imageLength:?"116411",imageName:?"logo.png"}

],"page":{size:2,index:1}};

需增加兩個自定義的過濾器：

ng.module('index-filters', []).filter('paging',function(){return function (items, index, pageSize) {if (!items)return [];var offset = (index - 1) * pageSize;return items.slice(offset, offset pageSize);}}).filter('size',function(){return function (items) {if (!items)return 0;return items.length || 0}})

?

效果如圖：

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的angularjs 利用filter进行表单查询及分页查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。