加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

anglejs – Angular UI Bootstrap分页ng模型不更新

发布时间:2020-12-17 10:34:15 所属栏目:安全 来源:网络整理
导读:我正在尝试在我的项目中使用UI引导分页指令,但是出于某些奇怪的原因,用于更新当前页面的ng模型不起作用.分页正确显示正确的选项卡数量和所有内容,但是当我点击不同的数字时,ng模型变量没有更新.对于我的生活,我不知道为什么不这样做. 我使用的代码来自UI Boo
我正在尝试在我的项目中使用UI引导分页指令,但是出于某些奇怪的原因,用于更新当前页面的ng模型不起作用.分页正确显示正确的选项卡数量和所有内容,但是当我点击不同的数字时,ng模型变量没有更新.对于我的生活,我不知道为什么不这样做.

我使用的代码来自UI Bootstrap主页上的示例:

<uib-pagination total-items="totalItems" ng-model="currentPage"
  ng-change="pageChanged()"></uib-pagination>

控制器看起来像这样:

$scope.currentPage = 1;
$scope.totalItems = 160;

$scope.pageChanged = function() {
  console.log('Page changed to: ' + $scope.currentPage);
};

以下是我所包含的不同需求来源:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>

最奇怪的是我创建了一个复制我的代码的工具,它的工作原理!你可以在这里看到:http://plnkr.co/edit/4DoKnRACbKjLnMH5vGB6

有人会想到任何可能导致这种不起作用的想法吗?我在这边抓我的头,不能想到有什么明显的我做错了吗?

全力帮助!

我遇到同样的问题,并通过将所有Angular UI Bootstrap分页表包装到对象中来解决它,如下所示:

JS

$scope.pagination = {
    currentPage: 1,maxSize: 21,totalItems = data.count;
};

HTML

<uib-pagination
    total-items="pagination.totalItems" 
    ng-model="pagination.currentPage" 
    max-size="pagination.maxSize"
    boundary-link-numbers="true" 
    ng-change="pageChanged()"></uib-pagination>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读