发表于: 2017-01-19 00:50:27

2 1412


1.今天完成的事:
  1.完成小程序导航分页功能

  2. 学习angular ui-bootstrap中的分页指令用法。

2. 明天的计划: 

 整理项目代码,学习angularjs

3. 遇到的困难:

  根据不同的需求,配置不同的参数。

1.uib-pagination 分页器参数
  boundary-links:是否显示第一个/最后一个按钮。
  boundary-link-numbers  (Defaultfalse是否总是显示第一个和最后一个页码。如果最大页码大于设置的最小显示页数,则会在最大或最小页面和中间页面之间增加一个按  钮,内容为省略号,如果最大页码小于设置的最小显示页数,则不显示省略号按钮
  direction-links  (Defaulttrue是否显示之前/下一个按钮。
  first-text  (DefaultFirst第一个按钮的文本。
  force-ellipses  (Defaultfalse当总页数大于最大显示页数(max-size)显示省略号按钮
  items-per-page  (Default10每页最大显示条数的数量。值小于1表明所有项目在一个页上。
  last-text  (DefaultLast最后一个按钮的文本。
  max-size   (Defaultnull限制分页按钮显示的数量大小。
  next-text  (DefaultNext下一个按钮的文本
  ng-change  点击分页按钮触发的方法,可用于更改不同页面数据
  ng-disabled   (Defaultfalse用于禁用分页组件。
  ng-model     当前页数第一页为1(即从1开始计算而不是0.
  num-pages  readonly (Defaultangular.noop-  一个可选的配置,显示页面总数(这是个只读项,并不是可以通过设置页面数和当前页配置分页).
  page-label (Defaultangular.identity可选的表达式,以覆盖基于传递当前页面索引的页标签。
$scope.currentPage //只用关注当前选中页面按钮的数值,根据这个值来过滤数据

<ul uib-pagination total-items="totalItems" first-text="首页" last-text="末页" previous-text="上一页" next-text="下一页

    ng-model="currentPage" ng-change="pageChanged()">  //

</ul>
/* 分页器 */
mainCtrl.controller('PaginationDemoCtrl', function ($scope,$rootScope, $log,$filter) {
   $scope.totalItems = $rootScope.imgList.length-12; //参数的总数,控制页面显示多少个按钮
   $scope.currentPage = 1; //当前页面按钮的值,初始值为1

   $scope.setPage = function (pageNo) {  //跳转页面
       $scope.currentPage = pageNo;  
   };

   $scope.$watch('imgList+totalItems',function (n,o) {
       $rootScope.imgList = $filter('to_pagination')($scope.imglistfilter,$scope.currentPage);
       $scope.totalItems = $scope.imglistfilter.length-12;
   },true);

   $scope.pageChanged = function() {  //分页按钮点击时触发的事件,处理数据更新视图
       $rootScope.imgList = $filter('to_pagination')($scope.imglistfilter,$scope.currentPage); 
   };
});
4. 今天的收获:

   今天分享的是原型的继承原理,没有理解到。



返回列表 返回列表
评论

    分享到