欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

angularjs使用directive实现分页组件的示例

程序员文章站 2022-03-07 11:01:30
闲来没事,分享下项目中自己写的分页组件。来不及了,直接上车。 效果: 输入框可任意输入,并会自动提交到该页 依赖项: fontawesome,boots...

闲来没事,分享下项目中自己写的分页组件。来不及了,直接上车。

效果:

angularjs使用directive实现分页组件的示例

angularjs使用directive实现分页组件的示例

angularjs使用directive实现分页组件的示例

输入框可任意输入,并会自动提交到该页

依赖项:

fontawesome,bootstrap

html:

<ul class="page clearfix">
  <li ng-hide="currentpage <= 1">
    <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" firstpage()">
      <i class="fa fa-step-backward"></i>
    </a>
    <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" prepage()">
      <i class="fa fa-play fa-flip-horizontal"></i>
    </a>
  </li>
  <li>
    <span>页码</span>
    <input type="text" ng-model="currentpage">/
    <span ng-bind="totalpage"></span>
  </li>
  <li ng-hide="currentpage >= totalpage">
    <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" nextpage()">
      <i class="fa fa-play"></i>
    </a>
    <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" lastpage()">
      <i class="fa fa-step-forward"></i>
    </a>
  </li>
</ul>

css:

/* 分页 */
.page {
  margin: 15px 0;
  padding: 0;
  float: right;
}
.page li {
  list-style: none;
  float: left;
  height: 30px;
  line-height: 30px;
}
.page li input {
  padding: 3px 5px;
  height: 100%;
  width: 50px;
  border: none;
  background-color: #eaeef1;
  text-align: center;
  margin-right: 10px;
}
.page li span {
  margin-right: 15px;
}
.page li a {
  text-decoration: none;
  outline: none;
  margin-right: 15px;
}

directive:

app.directive('paging', function() { // 分页
  return {
    restrict: 'a',
    replace: true,
    scope: {
      totalpage: '=totalpage',
      currentpage: '=currentpage',
      getdata: '&getdata'
    },
    templateurl: 'app/views/partials/paging.html',
    controller: function($scope) {

      $scope.firstpage = function() { $scope.currentpage = 1; }
      $scope.lastpage = function() { $scope.currentpage = $scope.totalpage; }
      $scope.prepage = function() { $scope.currentpage--; }
      $scope.nextpage = function() { $scope.currentpage++; }

      $scope.$watch('currentpage', function(newval, oldval) {
        if(newval != oldval && newval) $scope.getdata();
      })
    }
  };
});

参数:

  • totalpage: 总页数,
  • currentpage: 当前页,
  • getdata: 点击分页所触发的函数

用法:

controller:

$scope.current_page = 1; // 当前页
$scope.getdata = function() {
  $scope.param.page = $scope.current_page;
  connectapi.start('post', 'index/student/getschoolclasslist', $scope.param).then(function(response) { // 这个connectapi 你大可不必关心,这是我封装的http函数
    var data = connectapi.data({ res: response, _index: index });
    $scope.data = data.data;
    $scope.totalpage = data.data.total_page; // 服务器端返回的总页数
  }
}
$scope.getdata(); // 获取数据的函数

html:

<div paging total-page="totalpage" current-page="current_page" get-data="getdata()"></div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。