[英]AngularJS - ui-bootstrap pagination “show more results” not working
I cant seem to get my select drop down "show more results" to work with ui-bootstrap. 我似乎无法选择下拉菜单“显示更多结果”来使用ui-bootstrap。 I got it working with dir-pagination but not bootstrap. 我得到它的目录分页,但没有引导程序。 What I simply need it to do is when they select 10 from the dropdown I want it to display ten results. 我唯一需要做的是,当他们从下拉菜单中选择10时,我希望它显示十个结果。 Simple right? 简单吧? Not for me apparently. 显然不适合我。 :() :()
Here is my HTML: 这是我的HTML:
// Show more results
<select ng-model="pageSize" id="pageSize" class="form-control searchShowMore">
<option ng-selected="true" value="5">5</option>
<option value="10">10</option>
</select>
<div ng-repeat="res in details.Results | startFrom:(currentPage - 1) * pageSize | limitTo: pageSize" class="myCar">
<div class="carId">{{ res['Display Name'] }}</div>
<div class="title">{{ res['Project Title'] }}</div>
<h4><u>Amount</u></h4>
<div class="modified">${{ res.Amount | number: 2 }}</div>
</div>
<ul uib-pagination total-items="details.Results.length" ng-model="currentPage" items-per-page="pageSize"></ul>
Right now it just displays all the results unless I add $scope.pageSize = 5; 现在,除非我添加$ scope.pageSize = 5,否则它只会显示所有结果。 in the controller. 在控制器中。 I figured that it would would work the same as dir-pagination but I'm obviously wrong. 我认为它的作用与目录分页相同,但我显然错了。 :) :)
One thing to point out also is that it only loads all the data at first. 要指出的一件事是,它首先只加载所有数据。 Once I click the dropdown and select 5 it changes the items per page to only show 5. It is just the initial load where it shows all the data. 单击下拉列表并选择5后,它会将每页的项目更改为仅显示5。这只是初始加载,其中显示了所有数据。 I think it has something to do with the select option that has ng-selected="true" value="5". 我认为这与ng-selected =“ true” value =“ 5”的select选项有关。 Its not grabbing the initial value at the beginning 一开始没有抓住初始值
Anyone know if this is possible with ui-bootstraps pagination? 有人知道使用ui-bootstraps分页是否可行?
Do these things, 做这些事
startFrom
and limitTo
in the ng-repeat. 在ng-repeat中删除startFrom
和limitTo
。 uib-pagination
will automatically see to it. uib-pagination
将自动看到它。 select
ng-model as ng-model="pageSize"
and items-per-page="pageSize"
for the uib-pagination
将select
ng-model设置为ng-model="pageSize"
items-per-page="pageSize"
,并将uib-pagination
为items-per-page="pageSize"
ng-model
of uib-pagination
is currentPage
. uib-pagination
ng-model
是currentPage
。 Do not set it to pageSize
. 不要将其设置为pageSize
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.