Question

我已经在AngularJS中实现了分页和搜索，但是它只能在显示的页面上工作。 HTML文件

    <div id="home" class="tab-pane fade in active">
    <div class="row"><div class="col-md-10"><h1 style="font-size: 25px;margin-bottom:26px;">Jobs</h1></div></div>
    <div class="row">
        <div class="col-md-0"></div>
        <div class="col-md-10" style="margin-top:5px">
            <div class="container">
               <li style="list-style-type: none;display: inline-block;width: 85%;"> <form name="myForm" action="/action_page.php" method="get" class="adjust" style="margin-left:-26px;margin-top:2px;">
                     <input type="text" name="Keyword" placeholder="Keyword" class="borderclr" ng-model='search.jobTitle' style="border: 1px solid #ddd;padding: 10px;width: 48%;margin-left:5px;"> 
                    <input type="text" name="Location" placeholder="Location"class="borderclr" ng-model='search.location' style="border: 1px solid #ddd;padding: 10px;width: 50%;">
                </form>
                </li>
                <li style="list-style-type: none;display: inline-block;">
                <i class="fa fa-plus" title="Add Job" ng-click="openJobModal('add')" data-toggle="modal" data-target="#jobDetails"
            style="margin-top: 33px; color: rgb(237,78,110);cursor: pointer;font-size: 22px;margin-left: -140px;outline:none;"></i>
            </li>

            </div>
            <div class= row>
            <div class="col-md-10"></div>
            <div class="col-md-2"></div>
            </div> 
            <div ng-repeat="Job in JobDetails.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | filter:search:strict">
            <!-- <p style="font-size: 13px;color: #808080;padding: 18px;margin-left: 49px;">Found 395 Jobs</p> -->
            <h3 style="font-size: 18px;color: #000;font-weight: 600;margin-top: 2px;margin-left: -4px;text-align:left;margin-bottom: -7px;">
            Title : {{Job.jobTitle}}</h3>
            <div class="row" style="margin-left:1px;">
             <div class="col-md-8" style="margin-left: -16px;margin-top:6px">  <b> {{Job.location}}  | {{Job.jobRate}} | {{Job.jobType}}</b></div>
              <div class="col-md-1"><i class="fa fa-eye" title="View Job" ng-click="Jobview(Job.SerialNumber)" data-toggle="modal" data-target="#jobDetails" style="margin-top:10px;cursor: pointer;color : rgb(237,78,110);font-size:22px;outline:none;"></i></div>
             <div class="col-md-1"><i class="fa fa-trash" title="Delete Job" ng-click="JobDelete(Job.SerialNumber,Job.Publish)" style="margin-top:10px;cursor: pointer;color : rgb(237,78,110);font-size:22px;outline:none;"></i></div>
             <div class="col-md-2"><button style="padding: 6px 22px;" ng-click="jobPublish('true',Job.SerialNumber)" type="button" ng-hide="{{Job.Publish}}" class="btn btn-success">Publish</button>
             <button type="button" ng-click="jobPublish('false',Job.SerialNumber)" ng-show="{{Job.Publish}}" class="btn btn-warning">UnPublish</button>
            </div>
            </div>
            <p style=" text-align: justify;text-justify: inter-word;">
            <b>Description :</b>{{Job.jobDescription | limitTo: 400 }}{{Job.jobDescription.length > 400 ? '...' : ''}}</p>
            <hr>
        </div>
        </div>

    </div>
    <div ng-show="JobDetails !=''" style="text-align: right;">
        <pagination total-items="JobDetails.length" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" class="pagination-sm" boundary-links="true" items-per-page="itemsPerPage"></pagination>
    </div>
    </div>

脚本

$scope.JobDetails = [];
        for(var i=response.data.length-1;i>=0;i--){
            $scope.JobDetails.push(response.data[i]);
        }
        $scope.viewby = 5;
        $scope.totalItems = $scope.JobDetails.length;
        $scope.currentPage = 1;
        $scope.itemsPerPage = $scope.viewby;
        $scope.maxSize = 7; //Number of pager buttons to show

当我使用搜索框进行搜索时，结果仅适用于该页面。如果我们删除分页，则搜索工作正常。

有人可以帮忙吗？

Answer 1

您的搜索过滤器仅适用于醋栗页面项目，因此您只会获得此页面中存在的已过滤项目。

您可以执行以下操作来解决该问题：

 <div ng-repeat="Job in currentJobDetails | filter:search:strict">

在您的pageChanged（）函数中，您可以添加：

function pageChanged(){
   currentJobDetails = JobDetails.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage));
 }

您可能还需要在单击时添加搜索按钮和呼叫功能：

     function search(){
   currentJobDetails = JobDetails;
 }

这将搜索您所有的商品

分页不适用于Angular JS中的所有页面

1 个答案: