欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angularjs使用directive實(shí)現(xiàn)分頁(yè)組件的示例

 更新時(shí)間：2017年02月07日 15:19:52   作者：冰果在線  
本篇文章主要介紹了angularjs使用directive實(shí)現(xiàn)分頁(yè)組件的示例，具有一定的參考價(jià)值，有興趣的可以了解一下。

閑來(lái)沒事，分享下項(xiàng)目中自己寫的分頁(yè)組件。來(lái)不及了，直接上車。

效果：

輸入框可任意輸入，并會(huì)自動(dòng)提交到該頁(yè)

依賴項(xiàng)：

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>頁(yè)碼</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:

/* 分頁(yè) */
.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() { // 分頁(yè)
  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();
      })
    }
  };
});

參數(shù)：

  • totalPage: 總頁(yè)數(shù),
  • currentPage: 當(dāng)前頁(yè),
  • getData: 點(diǎn)擊分頁(yè)所觸發(fā)的函數(shù)

用法：

controller：

$scope.current_page = 1; // 當(dāng)前頁(yè)
$scope.getData = function() {
  $scope.param.page = $scope.current_page;
  ConnectApi.start('post', 'index/student/getschoolclasslist', $scope.param).then(function(response) { // 這個(gè)ConnectApi 你大可不必關(guān)心，這是我封裝的http函數(shù)
    var data = ConnectApi.data({ res: response, _index: index });
    $scope.data = data.data;
    $scope.totalpage = data.data.total_page; // 服務(wù)器端返回的總頁(yè)數(shù)
  }
}
$scope.getData(); // 獲取數(shù)據(jù)的函數(shù)

html:

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • Angularjs添加排序查詢功能的實(shí)例代碼

    Angularjs添加排序查詢功能的實(shí)例代碼

    這篇文章主要介紹了Angularjs添加排序查詢功能的實(shí)例代碼,需要的朋友可以參考下
    2017-10-10
  • Angular2使用Angular CLI快速搭建工程（一）

    Angular2使用Angular CLI快速搭建工程（一）

    這篇文章主要介紹了Angular2使用Angular CLI快速搭建工程,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • NodeJs——入門必看攻略

    NodeJs——入門必看攻略

    下面小編就為大家?guī)?lái)一篇NodeJs——入門必看攻略。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-06
  • ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼

    ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼

    ionic是一個(gè)垮平臺(tái)開發(fā)框架，可通過(guò)web技術(shù)開發(fā)出多平臺(tái)的應(yīng)用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2019-06-06
  • AngularJS Ajax詳解及示例代碼

    AngularJS Ajax詳解及示例代碼

    本文主要講解AngularJS Ajax的知識(shí)，這里提供詳細(xì)資料及代碼示例，幫助學(xué)習(xí)AngularJS的朋友,有需要的小伙伴可以參考下
    2016-08-08
  • angular中子控制器向父控制器傳值的實(shí)例

    angular中子控制器向父控制器傳值的實(shí)例

    今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-10-10
  • 分享Angular http interceptors 攔截器使用(推薦)

    分享Angular http interceptors 攔截器使用(推薦)

    AngularJS 是一個(gè) JavaScript 框架。它可通過(guò) <script> 標(biāo)簽添加到 HTML 頁(yè)面。這篇文章主要介紹了分享Angular http interceptors 攔截器使用(推薦),需要的朋友可以參考下
    2019-11-11
  • 快速學(xué)習(xí)AngularJs HTTP響應(yīng)攔截器

    快速學(xué)習(xí)AngularJs HTTP響應(yīng)攔截器

    任何時(shí)候，如果我們想要為請(qǐng)求添加全局功能，例如身份認(rèn)證、錯(cuò)誤處理等，在請(qǐng)求發(fā)送給服務(wù)器之前或服務(wù)器返回時(shí)對(duì)其進(jìn)行攔截，是比較好的實(shí)現(xiàn)手段
    2015-12-12
  • AngularJS ui-router刷新子頁(yè)面路由的方法

    AngularJS ui-router刷新子頁(yè)面路由的方法

    這篇文章主要介紹了AngularJS ui-router刷新子頁(yè)面路由的方法，網(wǎng)上雖然有很多種方法，但是都不適合小編，今天小編給大家分享一個(gè)還不錯(cuò)的方法，需要的朋友可以參考下
    2018-07-07
  • 實(shí)踐中學(xué)習(xí)AngularJS表單

    實(shí)踐中學(xué)習(xí)AngularJS表單

    表單是最常用的一種組建。在Angular.js中，其實(shí)并沒有單獨(dú)的為表單添加多少特殊功能。但是，利用Angular.js框架本身的特點(diǎn)，可以更友好的呈現(xiàn)表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實(shí)現(xiàn)的
    2016-03-03

最新評(píng)論