Question

我有一个用户表，我可以根据定义的某个状态对显示进行排序。

HTML

<div data-ng-controller="adminController">
   <div class="row">
      <div class="col-md-9">
        <h3>&nbsp;&nbsp; &nbsp;<span style="color:blue">List of Applied Users</span></h3>
        </div>
        <div class="col-md-2">
        <br>
        <select class="form-control" id="sel1" data-ng-model="status" required>
             <option value="">Status</option>
             <option value="Open">Open</option>
             <option value="In-Progress">In-Progress</option>
             <option value="Rejected">Rejected</option>
             <option value="Verified">Verified</option>
             <option value="Closed">Closed</option>
        </select>
        </div>
    </div>
<br>
<div class="padding">
<table class="table table-hover" border="2" >
    <thead>
        <tr>
            <th width="30" bgcolor="#FF8566">Si.No</th>
            <th width="90" bgcolor="#FF8566">Date</th>
            <th width="140" bgcolor="#FF8566">Name</th>  
            <th width="340" bgcolor="#FF8566">Service Name</th>             
            <th width="90" bgcolor="#FF8566">Status</th>
            th width="40" bgcolor="#FF8566"></th>

                </tr>
            </thead>
            <tbody>
       <tr data-ng-repeat="userDetails in (data | filter:status:status.status).slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">   
            <td></td>
            <td> {{ userDetails.subDate | date : 'MM-dd-yyyy' }} </td>
            <td> {{ userDetails.fullName }} </td>
            <td> {{ userDetails.serviceType.serviceName }} </td>
            <td> {{ userDetails.status.status }} </td>
            <td>
                <button type="button" class="btn btn-xs btn-success" data-ng-click="editUser(userDetails.id)" ng-if="userDetails.status.status !=='Closed'" >View</button></td>
         </tr>
      </tbody>       
    </table>

  </div>


<uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" items-per-page="itemsPerPage" ng-show ="blocked"></uib-pagination>

</div>

JS

app.controller('adminController',[ '$scope', '$http', function($scope, $http) {
    $scope.$watch('status', function()
            {
                var array =[];
                alert($scope.status);
                if($scope.status!=undefined)
                {
                    totaldata.forEach(function(value, arr)
                        {

                            if(value.status.status==$scope.status)
                                {
                                    array.push(value);

                                }
                            console.log($scope.status);

                        })
                        $scope.data = array;        
                        $scope.totalItems = array.length;
                        console.log(array.length);

                }
                else{
                    $scope.data = totaldata;        
                    $scope.totalItems = totaldata.length;
                    console.log(totaldata.length);
                }
            })      

    $http.get('getAlldetails').success(function(response)
            {
        $scope.blocked = true;
                $scope.data = response;
                totaldata=response;
                $scope.totalItems = response.length;
                $scope.currentPage = 1;
                $scope.itemsPerPage = 9;
                $scope.maxSize = 5; 

                alert($scope.totalItems.length);

                $scope.setPage = function (pageNo) {
                    $scope.currentPage = pageNo;
                };


                }).error(function(error)
                    {
                alert(error);
            });

    $scope.editUser = function(id)
    {
        $location.url('/editUser/'+ id);
    }
}]);

如果在应用过滤器后只显示一个页面，如何隐藏分页？我尝试使用ng-show和ng-if，但没有运气。

Answer 1

过滤ng-repeat上的数据

<tr ng-repeat="row in filteredData = (tableData | filter: filterQuery)">                        
      <td>{{row.name}}</td>
      <td>{{row.last_name}}</td>
      <td>{{row.age}}</td>
      <td>{{row.email}}</td>
 </tr>

将你uib-pagination包裹在div中并设置ng-show / ng-hide，仅当filteredData的数量大于每页的项目数量时显示分页（包含更多项目，然后是每个项目页面意味着你有超过1页）

<div ng-show="filteredData.length > itemsPerPage">
    <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" items-per-page="itemsPerPage" ng-show ="blocked"></uib-pagination>
</div>

因此，当您更改过滤条件时，摘要周期将重新评估您的ng-show

如果只使用AngularJs显示一个页面，如何禁用分页

1 个答案: