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/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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361002.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么现在是升级到Java 8的最佳时机

有兴趣了解如何通过AppDynamics充分利用Java 8的新功能吗&#xff1f; 立即开始免费试用 &#xff01; 今年3月&#xff0c;Oracle发布了近十年来最受期待的版本Java8。自发布以来&#xff0c;最新版本引起了越来越多的关注&#xff0c;各种规模的公司都渴望升级。 我们的合作…

requirejs与anjularjs框架

1.目录 2.首页login.html如下&#xff1a; <!DOCTYPE html><html> <head> <title>登录界面</title> <link relstylesheet href/stylesheets/style.css /> <link rel"stylesheet" href"/css/bootstrap.min.css">…

Qt基于TCP网络程序发包封包抽象

之前没经验, 发送数据包的时候, 包头包尾等信息都是通过重新定义一个结构体实现, 不同的协议包就有不同的结构体, 结果导致这样的现象: 有多少上层业务协议包, 我就分别重新定义一个对应的加上包头包尾的新的结构体, 很费劲.......额.... 现在, 重新想了下, 一个改进的方式, 把…

SQL学习笔记

可以把 SQL 分为两个部分&#xff1a;数据操作语言 (DML) 和 数据定义语言 (DDL)。 查询和更新指令构成了 SQL 的 DML 部分&#xff1a; SELECT - 从数据库表中获取数据UPDATE - 更新数据库表中的数据DELETE - 从数据库表中删除数据INSERT INTO - 向数据库表中插入数据SQL 的数…

Spring MVC 4快速入门Maven原型已改进

Spring Boot使Spring入门非常容易。 但是仍然有人对不使用Spring Boot并以更经典的方式引导应用程序感兴趣。 几年前&#xff0c;我创建了一个原型&#xff08;早于Spring Boot&#xff09;&#xff0c;简化了引导Spring Web应用程序的过程。 尽管Spring Boot已经上市了一段时间…

图片循环播放

使用 pageSwitch插件 多种效果 引入 jquery.js 和 pageSwitch.min.js <script src"js/jquery-1.11.0.min.js"></script> <script src"dist/pageSwitch.min.js"></script>在页面定义标签 <div id"container">…

当你辛辛苦苦写的博客文章被无情复制,成为了他的原创,你作何感想?

我一直都说我之所以开始写博客&#xff0c;是因为我是想把博客当成一个备忘录&#xff0c;同时也能分享给大家。我才开博1个月&#xff0c;还没有写几篇文章&#xff0c;我发现每篇文章都被很多网站转载了&#xff0c;有的署名或者是贴上我文章的地址作为来源地址。 对于这种情…

SSL / TLS REST服务器–带有Spring和TomEE的客户端

在构建系统时&#xff0c;开发人员通常会忽略安全性方面。 安全一直是令人担忧的重要问题&#xff0c;但是它比以前吸引了更高的关注。 就在今年&#xff0c;我们发生了像Heartbleed Bug或CelebrityGate丑闻这样的案件。 这与帖子无关&#xff0c;只是安全真正重要的示例&#…

linux apf防火墙安装配置

linux apf防火墙安装配置APF(Advanced Policy Firewall)是 Rf-x Networks 出品的Linux环境下的软件防火墙,被大部分Linux服务器管理员所采用,使用iptables的规则,易于理解及使用。 www.2cto.com 适合对iptables不是很熟悉的人使用&#xff0c;因为它的安装配置比较简单&#x…

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证、图片预览效果代码jquery实现上传图片及图片大小验证、图片预览效果代码 上传图片验证 */ function submit_upload_picture(){ var file $(file_c).value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ aler…

使用Spring Boot和Logback登录到Redis

在进行集中式日志记录时&#xff0c;例如使用Elasticsearch&#xff0c;Logstash和Kibana或Graylog2&#xff0c;您可以为Java应用程序提供几个选项。 您既可以编写标准的应用程序日志&#xff0c;也可以使用Logstash解析这些日志&#xff0c;这些日志既可以直接使用&#xff0…

《CSS世界》学习笔记(一)

《CSS世界》&#xff0c;张鑫旭著&#xff0c;人民邮电出版社&#xff0c;2017年12月第一版。 1.P9二维码链接文章的demo值得一看&#xff0c;可以实现有关“某些区域颜色始终保持一致”的效果。 P9二维码所链接文章的一个demo里&#xff0c;图标用i标签 背景图的形式实现。我…

Tautology(poj3295)(DFS)

本题中最多5个命题变项&#xff1a;p,q,r,s,t 每个有0,1两种取值&#xff0c;所以总共32种情况&#xff0c;分别枚举即可。 对于每种情况&#xff0c;计算表达式的值&#xff0c;如果有结果为0的则输出not 难点在于如何计算表达式的值&#xff0c;我们采用递归的方法&#xff0…

Spring重试–与项目集成的方式

如果您需要在代码中实现健壮的重试逻辑&#xff0c;一种行之有效的方法是使用spring重试库。 我的目的不是要展示如何使用spring retry项目本身&#xff0c;而是要展示可以将其集成到代码库中的不同方式。 考虑一种服务来调用外部系统&#xff1a; package retry.service;pub…

(1)《Head First HTML与CSS》学习笔记---HTML基本概念

前言&#xff1a; 1. 这本书并没有面面俱到&#xff0c;涵盖所有内容&#xff0c;只提供作为初学者真正需要的东西&#xff1a;基本知识和信心。所以这不是唯一的参考书。&#xff08;我买了一本《HTML5权威指南》作为参考书和这本一起看&#xff0c;但还是以本书为第一个…

mac中如何从vim文本编辑器退回到命令

有的时候&#xff0c;我们经常从命令行中进入vim文本编辑器&#xff0c;如何退回来呢&#xff1a; 只需要经过两步&#xff1a;1.按下esc键 2.输入":wq"(保存退出) 输入":q!"(不保存退出) 在文件名前面加./ ,表示在当前目录中查找该文件 例如执行可执行文…

拥有您的堆:使用JVMTI迭代类实例

今天&#xff0c;我想谈一谈我们大多数人每天都不会看到和使用的另一种Java&#xff0c;更确切地说&#xff0c;是有关较低级别的绑定&#xff0c;一些本机代码以及如何执行一些小的魔术。 尽管我们不会在JVM上找到真正的魔力源&#xff0c;但是在单个帖子的范围内可以实现一些…

Dojo高级Web2.0 UI组件库---Tree组件

Tree组件可以把有层次关系的数据用树状结构展现出来&#xff0c;就如同 Windows 系统的资源浏览器。Tree有两个模板&#xff0c;一个是Tree模板&#xff0c;一个是TreeNode模板&#xff0c;应该说Tree模板就是一个容器&#xff0c;里面有很多TreeNode.而初始化树&#xff0c;打…

使用Java 8防止日志过宽

一些日志将被机器消耗并永久保存。 其他日志仅用于调试和供人类使用。 在后一种情况下&#xff0c;您通常要确保您不会产生过多的日志&#xff0c;尤其是不会产生太宽的日志&#xff0c;因为一旦行长超过一定大小&#xff08; 例如&#xff0c;此Eclipse bug &#xff09;&…

[one day one question] webpack打包压缩 ES6 js、.vue报错

问题描述&#xff1a; 报错&#xff1a; ERROR in js/test.js from UglifyJs Unexpected token punc ?(?, expected punc ?:? [js/test.js:1374,5]&#xff0c;这怎么破&#xff1f; 解决方案&#xff1a; 配置babel&#xff0c;把配置放到文件【.babelrc】中{"prese…