gpt4 book ai didi

angularjs - 分页未显示在屏幕上

转载 作者:行者123 更新时间:2023-12-02 07:21:43 25 4
gpt4 key购买 nike

尝试在表格上实现分页。但是 Uib-pagination 不显示,但是元素可以在 gui 上检查。

我哪里错了

Controller

 //all rows to display on main page  from build_req table
$scope.allrows = function() { //need to enable this
service.getAllBulidReqData().then(function(response) {
if (response.status == "success") {
$scope.rowcollection = response.data;
outsidescope();
} else {
location.path("/")
}
})
}
$scope.allrows();
//Pagination for table
function outsidescope() {
// console.log($scope.rowcollection)
$scope.totalItems = $scope.rowcollection.length;
$scope.itemsPerPage = 1
$scope.currentPage = 1;

$scope.pageCount = function() {
return Math.ceil($scope.rowcollection.length / $scope.itemsPerPage);
};

$scope.$watch('currentPage + itemsPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;

$scope.rowcollection = $scope.rowcollection.slice(begin, end);
});
}

html

  <table init-table="rowCollection"   class="table table-striped  table-hover table-bordered" ng-class="fulltable? 'full-width' : 'custom-width'" >       
<caption>All Requests
<div class= "pull-right">
<button class="btn-sm btn-default btn-filter" ng-click= "filtershow()"><span class="glyphicon glyphicon-filter" ></span> Filter</button>
</div>
<div class="form-group pull-right" style= "margin-left :-350px;width:28%;margin-bottom:0px">
<div class="input-group" ng-show="filter">
<div class="input-group-addon" style="background-color: #428BCA;">
<span class="fa fa-search" style="color:white;"></span>
</div>
<input type="text" class="col-sm-4 control-label" placeholder="What you looking for?" required ng-model="search">
</div>
</div>
</caption>
<thead>
<tr class ="filters">
<th>Id</th>
<th class="col-sm-2">Abstract</th>
<th class="col-md-3">RTC Workspace</th>
<th class="col-md-2">Requester </th>
<th class="col-md-2">Customer </th>
<th class="col-md-2">Build Start</th>
<th class="col-md-1">Build Status</th>
<th class= "col-md-1">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowcollection.slice().reverse()|filter:search:false" >
<td>{{row.build_id}}</td>
<td >{{row.abstract}}</td>
<td>{{row.rtc_workspace}}</td>
<td>{{row.user_name}}</td>
<td>{{row.customer_name}}</td>
<td>{{row.build_start}}</td>
<td ng-class="{'color-red': row.build_status === 'Rejected',
'color-orange': row.build_status === 'Approval Pending',
'color-green': row.build_status.trim() === 'Approved',
'color-blue': row.build_status === 'BUILD STARTED'}">
{{row.build_status}} </td>
<td>
<button type="button" class="btn-sm btn-primary" ng-if = "row.build_status === 'Approval Pending'" ng-disabled = "name == row.user_name" ng-click="approve(row)">Approve</button>
<button type="button" class="btn-sm btn-primary" ng-if = "row.build_status !== 'Approval Pending'" ng-click="approve(row)">View </button>
</td>
</tr>
</tbody>
<tfooter>
<tfoot>
</table>
<uib-pagination total-items="totalItems" ng-model="currentPage" class="pagination-sm" ng-change="pageChanged()" boundary-links ="true"></uib-pagination>

模块注入(inject)

我将 ui bootstrap 作为模块注入(inject),我只链接了 ui-bootstrap tpls 2.5 js 文件

屏幕截图 enter image description here

链接

  <script src="/js/angular.min.js"></script>
<script src="/js/ui-bootstrap-2.5.0.min.js"></script>
<script src="/js/angular-local-storage.min.js"></script>
<script src="/js/angular-ui-router.min.js"></script>
<script src="/js/angular-noty.js"></script>
<script src="/js/angular-route.js"></script>
<script src="/js/smarttable.js"></script>

最佳答案

在 ui.bootstrap 的 2.5.0 版中,分页指令仅限于属性(过去是元素或属性)。我不确定他们什么时候更改了它,最近我升级到 2.5 版时它对我来说坏了。

更改您的html代码

<uib-pagination total-items="totalItems" ... ></uib-pagination>

类似于

<div uib-pagination total-items="totalItems" ... ></div>

关于angularjs - 分页未显示在屏幕上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44156353/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com