php实现分页与搜索,在angularjs中如何实现分页和搜索功能

这篇文章主要介绍了angularjs实现分页和搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

话不多说,上代码

name

{{item.c}}

共 {{dataNum}} 条记录/当前第 {{currentPage+1}} 页 共 {{pages}} 页

• «
• »

javascript

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);

}

});

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：