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;

      }

    };

  });

巴特西

AngularJS学习之 ngTable 翻页功能以及利用angular service准备测试数据

最新文章

热门文章

巴特西

AngularJS学习之 ngTable 翻页 功能以及利用angular service准备测试数据

最新文章

热门文章

AngularJS学习之 ngTable 翻页功能以及利用angular service准备测试数据