angularjs 利用filter进行表单查询及分页查询

页面:

<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/ | number:}}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/ | number:}}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=""
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 - ) * pageSize;
return items.slice(offset, offset + pageSize);
}
})
.filter('size',function(){
return function (items) {
if (!items)
return ; return items.length ||
}
})

效果如图:

angularjs 利用filter进行表单查询及分页查询angularjs 利用filter进行表单查询及分页查询angularjs 利用filter进行表单查询及分页查询

上一篇:bzoj1911[Apio2010]特别行动队 斜率优化dp


下一篇:[luogu P3628] [APIO2010]特别行动队