AngularJS學習之 ngTable 翻頁 功能以及利用angular service准備測試數據

1.官網鏈接  https://github.com/esvit/ng-table#4.0.0

2.安裝ngTable后，一定要記得先注冊到自己的項目

.module('pttengApp', [
  'ngAnimate',
  'ngCookies',
  'ngResource',
  'ngRoute',
  'ngSanitize',
  'ngTouch',
  'mgcrea.ngStrap',
  'ngTable'
])

3.編輯使用ngTable的controller  JS文件

angular.module('pttengApp')
  .controller('ArticlelistCtrl', function ($scope,$location,ArticleService,NgTableParams) {/*NgTableParams一定要放在正確的位置*/ var self=this;
    var simplelist=ArticleService.getAll(); /*這個就是傳給NgTableParams的數據，也就是我們table里要顯示的各行數據*/
    self.tableParams=new NgTableParams({ count: 5},{counts: [5, 10, 20],dataset:simplelist});
    self.selectedPageSizes=self.tableParams.settings().counts;
    self.availablePageSizes = [5, 10, 15, 20, 25, 30, 40, 50, 100];
    self.changePage = changePage;

    function changePage(nextPage){
      self.tableParams.page(nextPage);
    }
    function changePageSize(newSize){
      self.tableParams.count(newSize);
    }
    function changePageSizes(newSizes){
      // ensure that the current page size is one of the options
      if (newSizes.indexOf(self.tableParams.count()) === -1) {
        newSizes.push(self.tableParams.count());
        newSizes.sort();
      }
      self.tableParams.settings({ counts: newSizes});
    }
  });

4.html部分的書寫

<table ng-table="articlelist.tableParams" show-filter="true" class="table table-hover">/*黑色高亮的就是使用ngTable的controller name*/
  <tr ng-repeat="article in $data">/*強調這個$data就是說這個很關鍵，這個data是tableParams里的data數組，也就是通過dataset添加進去要顯示的各行數據*/
    <td>{{article.id}}</td>
    <td>{{article.name}}</td>
    <td>{{article.type}}</td>
    <td>{{article.createtime}}</td>
    <td>{{article.lastmodifiedtime}}</td>
  </tr>
</table>

 *************************

利用 yo angular:service Article-Service創建一個服務，生成的js文件里面可以創建一個構造函數，屬性是JSON數據，方法就用來返回這些數據，然后我們就可以利用這個服務提供的數據進行前端功能的測試啦（在需要用到他的controller里面注人這個service,比如

.controller('ArticlelistCtrl', function ($scope,$location,ArticleService,NgTableParams) {

）

'use strict';

/**
 * @ngdoc service
 * @name pttengApp.ArticleService
 * @description
 * # ArticleService
 * Service in the pttengApp.
 */
angular.module('pttengApp')
  .service('ArticleService', function () {
    // AngularJS will instantiate a singleton by calling "new" on this function
    var articles = [
      {
        "id": "1",
        "name": "行業動態",
        "type": "行業",
        "createtime": "2017-05-06",
        "lastmodifiedtime": "2017-05-06",
        "createuser": "admin",
        "status": "0",
        "operation": "delete"
      },
      {
        "id": "2",
        "name": "JSON",
        "type": "語法",
        "createtime": "2017-05-06",
        "lastmodifiedtime": "2017-05-06",
        "createuser": "admin",
        "status": "0",
        "operation": "delete"
      }
    ];

    return {
      getAll: function () {
        return articles;
      },
      getById: function () {
        for (var i = 0; i < articles.length; i++) {
          if (articles[i].id === id) {
            return articles[i];
          }
        }
        return null;
      }
    };

  });