angularjs实现分页和搜索功能


Posted in Javascript onJanuary 03, 2018

本文实例为大家分享了angularjs实现分页和搜索展示的具体代码,供大家参考,具体内容如下

话不多说,上代码

<html class="no-js" ng-app="myApp"> 
<body ng-controller="mainController"> 
<table class="am-table am-table-striped am-table-hover table-main"> 
<thead> 
<tr> 
<th>name</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="item in houses | limitTo:listsPerPage"> 
<td>{{item.c}}</td> 
</tr> 
</tbody> 
</table> 
<div class="am-cf"> 
共 {{dataNum}} 条记录/当前第 {{currentPage+1}} 页 共 {{pages}} 页 
<div class="am-fr"> 
<ul class="am-pagination"> 
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" ng-click="prevPage()">«</a></li> 
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" ng-click="nextPage()">»</a></li> 
</ul> 
</div> 
</div> 
<script src="plugins/angularjs/angular.min.js" type="text/javascript"></script> 
</body> 
</html>

javascript

<script> 
var app = angular.module("myApp", []); 
app.controller("mainController", function ($scope, $http) { 
  //测试数据 
  var $data = {"fs":[{"c":"张一"},{"c":"张二"},{"c":"张三"},{"c":"张四"},{"c":"李一"},{"c":"李二"},{"c":"李三"},{"c":"李四"},{"c":"王一"},{"c":"王二"},{"c":"王三"},{"c":"王四"}]}; 
  $scope.currentPage = 0;//设置当前页是 0 
  $scope.listsPerPage = 3;//设置每页显示3个 
  //上一页 
  $scope.prevPage = function(){ 
    if($scope.currentPage > 0){ 
      $scope.currentPage--; 
    } 
  } 
  //下一页 
  $scope.nextPage = function(){ 
    if ($scope.currentPage < $scope.pages-1){ 
      $scope.currentPage++; 
    } 
  } 
  //监听搜索条件 
  $scope.$watch('search.c', function(){ 
    $scope.currentPage = 0; 
    searchResult(); 
  }); 
  //监听翻页 
  $scope.$watch('currentPage', function(){ 
    searchResult(); 
  }); 
  //搜索或翻页结果 
  function searchResult(){ 
    var out = []; 
    if($scope.search){ 
      angular.forEach($data.fs,function(k,v){ 
        if(k.c.indexOf($scope.search.c)>-1){ 
          out.push(k); 
        } 
      }); 
    } 
    else{ 
      out = $data.fs; 
    } 
    $scope.houses = out.slice($scope.currentPage*$scope.listsPerPage); 
    $scope.dataNum = out.length; 
    $scope.pages = Math.ceil($scope.dataNum/$scope.listsPerPage); 
  } 
}); 
 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
vue引入ueditor及node后台配置详解
Jan 03 #Javascript
Node.js搭建小程序后台服务
Jan 03 #Javascript
基于js文件加载优化(详解)
Jan 03 #Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
js 取消页面可以选中文字的功能方法
Jan 02 #Javascript
js阻止默认右键的下拉菜单方法
Jan 02 #Javascript
webpack实用小功能介绍
Jan 02 #Javascript
You might like
php无限极分类实现的两种解决方法
2013/04/28 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
高中生学习计划书
2014/09/15 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
客房领班岗位职责
2015/02/11 职场文书
服务员岗位职责范本
2015/04/09 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书