Anglejs에서 페이징 및 검색 기능을 구현하는 방법
이 글은 주로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>
<p class="am-cf">
共 {{dataNum}} 条记录/当前第 {{currentPage+1}} 页 共 {{pages}} 页
<p 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>
</p>
</p>
<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>위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.
관련 기사:
vue-cli에서 babel 구성 파일을 구성하는 방법
node.js를 사용하여 Douyin의 자동 빨간 봉투 잡기 기능 구현
위 내용은 Anglejs에서 페이징 및 검색 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Windows 11 검색에서 뉴스 및 인기 콘텐츠를 제거하는 방법
Oct 16, 2023 pm 08:13 PM
Windows 11에서 검색 필드를 클릭하면 검색 인터페이스가 자동으로 확장됩니다. 왼쪽에는 최근 프로그램 목록이 표시되고 오른쪽에는 웹 콘텐츠가 표시됩니다. Microsoft는 여기에 뉴스와 인기 콘텐츠를 표시합니다. 오늘의 확인에서는 Bing의 새로운 DALL-E3 이미지 생성 기능, "Bing과 함께 드래곤 채팅" 제안, 드래곤에 대한 추가 정보, 웹 섹션의 주요 뉴스, 게임 추천 및 인기 검색 섹션을 홍보합니다. 전체 항목 목록은 컴퓨터에서의 활동과 별개입니다. 일부 사용자는 뉴스를 볼 수 있는 기능을 높이 평가할 수도 있지만 이 모든 것은 다른 곳에서도 풍부하게 제공됩니다. 다른 사람들은 이를 직간접적으로 판촉이나 광고로 분류할 수도 있습니다. Microsoft는 자체 콘텐츠를 홍보하기 위해 인터페이스를 사용합니다.
PHP 개발: 테이블 데이터 정렬 및 페이징 기능 구현 방법
Sep 20, 2023 am 11:28 AM
PHP 개발: 테이블 데이터 정렬 및 페이징 기능 구현 방법 웹 개발에서는 대량의 데이터를 처리하는 것이 일반적인 작업입니다. 많은 양의 데이터를 표시해야 하는 테이블의 경우 일반적으로 좋은 사용자 경험을 제공하고 시스템 성능을 최적화하기 위해 데이터 정렬 및 페이징 기능을 구현해야 합니다. 이 기사에서는 PHP를 사용하여 테이블 데이터의 정렬 및 페이징 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 정렬 기능은 테이블에 정렬 기능을 구현하여 사용자가 다양한 필드에 따라 오름차순 또는 내림차순으로 정렬할 수 있도록 합니다. 다음은 구현 형태이다
Baidu 고급 검색을 사용하는 방법
Feb 22, 2024 am 11:09 AM
Baidu 고급 검색 사용 방법 Baidu 검색 엔진은 현재 중국에서 가장 일반적으로 사용되는 검색 엔진 중 하나이며, 그 중 하나가 고급 검색입니다. 고급 검색은 사용자가 필요한 정보를 보다 정확하게 검색하고 검색 효율성을 높이는 데 도움이 됩니다. 그렇다면 Baidu 고급 검색을 사용하는 방법은 무엇입니까? 첫 번째 단계는 Baidu 검색 엔진 홈페이지를 여는 것입니다. 먼저 Baidu의 공식 웹사이트인 www.baidu.com을 열어야 합니다. 바이두 검색에 들어가는 입구입니다. 두 번째 단계에서는 고급 검색 버튼을 클릭하세요. 바이두 검색창 오른쪽에
Xianyu에서 사용자를 검색하는 방법
Feb 24, 2024 am 11:25 AM
Xianyu는 어떻게 사용자를 검색하나요? 소프트웨어 Xianyu에서는 소프트웨어에서 소통하고 싶은 사용자를 직접 찾을 수 있습니다. 그런데 사용자를 검색하는 방법을 모르겠습니다. 검색 후 사용자들 사이에서 확인해보세요. 다음은 에디터가 사용자에게 제공하는 사용자 검색 방법에 대한 소개입니다. 관심이 있으신 분들은 꼭 들러보세요! Xianyu에서 사용자를 검색하는 방법 답변: 검색 후 사용자의 세부 정보를 봅니다. 소개: 1. 소프트웨어를 입력하고 검색 상자를 클릭합니다. 2. 사용자 이름을 입력하고 검색을 클릭하세요. 3. 검색창 아래의 [사용자]를 선택하여 해당 사용자를 찾으세요.
WPS 테이블에서 검색 중인 데이터를 찾을 수 없습니다. 검색 옵션 위치를 확인하세요.
Mar 19, 2024 pm 10:13 PM
지능이 지배하는 시대에는 사무용 소프트웨어도 대중화되었으며, 유연성으로 인해 대다수의 직장인이 Wps 형식을 채택합니다. 직장에서는 간단한 양식 작성과 텍스트 입력뿐만 아니라 실제 업무를 완료하기 위해 더 많은 운영 기술을 습득해야 합니다. 데이터가 포함된 보고서와 양식을 사용하는 것이 더욱 편리하고 명확하며 정확합니다. 오늘 우리가 당신에게 전하는 교훈은: WPS 테이블이 당신이 찾고 있는 데이터를 찾을 수 없다는 것입니다. 왜 검색 옵션 위치를 확인해야 합니까? 1. 먼저 Excel 테이블을 선택하고 두 번 클릭하여 엽니다. 그런 다음 이 인터페이스에서 모든 셀을 선택합니다. 2. 그런 다음 이 인터페이스의 상단 도구 모음에 있는 "파일"에서 "편집" 옵션을 클릭합니다. 3. 둘째, 이 인터페이스에서 "
모바일 타오바오 매장 검색하는 방법 매장명 검색하는 방법
Mar 13, 2024 am 11:00 AM
모바일 타오바오 앱 소프트웨어는 언제 어디서나 구입할 수 있으며, 모든 제품의 가격표가 명확하여 더욱 편리한 쇼핑을 즐길 수 있습니다. 원하는 대로 자유롭게 검색하고 구매할 수 있습니다. 개인 배송 주소와 연락처를 추가하면 택배사에서 쉽게 연락할 수 있으며, 최신 물류 동향도 실시간으로 확인할 수 있습니다. 사용자가 처음 사용하는 경우 제품을 검색하는 방법을 모르면 검색창에 키워드만 입력하면 모든 제품 결과를 자유롭게 찾을 수 있습니다. 에디터는 모바일 타오바오 사용자가 매장 이름을 검색할 수 있는 자세한 온라인 방법을 제공합니다. 1. 먼저 휴대폰에서 타오바오 앱을 열고,
JavaScript를 사용하여 테이블 페이징 기능을 구현하는 방법은 무엇입니까?
Oct 20, 2023 pm 06:19 PM
JavaScript를 사용하여 테이블 페이징 기능을 구현하는 방법은 무엇입니까? 인터넷이 발달하면서 점점 더 많은 웹사이트에서 데이터를 표시하기 위해 테이블을 사용하고 있습니다. 데이터 양이 많은 경우에는 사용자 경험을 개선하기 위해 데이터를 페이지에 표시해야 합니다. 이 기사에서는 JavaScript를 사용하여 테이블 페이징 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTML 구조 먼저 테이블과 페이징 버튼을 호스팅할 HTML 구조를 준비해야 합니다. <tab을 사용할 수 있습니다.
C++에서 해시 검색 알고리즘을 사용하는 방법
Sep 19, 2023 pm 02:49 PM
C++에서 해시 검색 알고리즘을 사용하는 방법 해시 검색 알고리즘은 해시 함수를 통해 키워드를 고정 길이 인덱스로 변환한 후 이 인덱스를 데이터 구조 검색에 사용하는 효율적인 검색 및 저장 기술입니다. C++에서는 표준 라이브러리의 해시 컨테이너와 해시 함수를 사용하여 해시 검색 알고리즘을 구현할 수 있습니다. 이 기사에서는 C++에서 해시 검색 알고리즘을 사용하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 헤더 파일과 네임스페이스 소개 먼저 C++에서 해시 검색 알고리즘을 사용하기 전에
