项目中用到angularjs的表格ng-table，功能相当强大，像搜索、排序、checkbox、分页、每页表格显示数目等都有。API，demo什么的也只能参考官网了。这里做个备忘，哪天肯定还会用到。

HTML：

<!DOCTYPE html>

<html>

<meta charset="utf-8"/>

<head>

    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="angular.js"></script>

    <script data-require="ng-table@*" data-semver="0.3.0" src="ngTable.js"></script>

    <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.2/ng-table.css" />

    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="bootstrap.min.css" />

    <link rel="stylesheet" href="style.css" />

    <script src="script.js"></script>

</head>

<body ng-app="main" ng-controller="DemoCtrl">

    <p><strong>Page:</strong> {{tableParams.page()}}

    <p><strong>Count per page:</strong> {{tableParams.count()}}

<p>Filter: <input class="form-control" type="text" ng-model="filter.$" /></p>

    <table ng-table="tableParams" show-filter="true" class="table">

        <tr ng-repeat="user in $data" ng-class="{ 'emphasis': user.money > 500 }">

            <td width="30" style="text-align: left" header="'ng-table/headers/checkbox.html'">

                <input type="checkbox" ng-model="checkboxes.items[user.organizationId]" />

            </td>

            <td data-title="'编号'"  sortable="'organizationId'">

                {{user.organizationId}}

            </td>

            <td  data-title="'名称'" sortable="'name'">

                {{user.name}}

            </td>

        </tr>

    </table>

    <script type="text/ng-template" id="ng-table/headers/checkbox.html">

        <input type="checkbox" ng-model="checkboxes.checked" id="select_all" name="filter-checkbox" value="" />

    </script>

</body>

</html>

js：

var app = angular.module('main', ['ngTable']).

controller('DemoCtrl', function($scope, ngTableParams, NameService) {

    var data = NameService.data;

    $scope.tableParams = new ngTableParams(

      {

        page: 1,            // show first page

        count: 10,           // count per page

        sorting: {name:'asc'}

      },

      {

        total: 0, // length of data

        getData: function($defer, params) {

          NameService.getData($defer,params,$scope.filter);

        }

    });

    $scope.$watch("filter.$", function () {

        $scope.tableParams.reload();

    });

});

app.service("NameService", function($http, $filter){

  function filterData(data, filter){

    return $filter('filter')(data, filter);

  }

  function orderData(data, params){

    return params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData;

  }

  function sliceData(data, params){

    return data.slice((params.page() - 1) * params.count(), params.page() * params.count())

  }

  function transformData(data,filter,params){

    return sliceData( orderData( filterData(data,filter), params ), params);

  }

  var service = {

    cachedData:[],

    getData:function($defer, params, filter){

      if(service.cachedData.length>0){

        console.log("using cached data")

        var filteredData = filterData(service.cachedData,filter);

        var transformedData = sliceData(orderData(filteredData,params),params);

        params.total(filteredData.length)

        $defer.resolve(transformedData);

      }

      else{

        console.log("fetching data")

        $http.get("data.json").success(function(resp)

        {

          angular.copy(resp,service.cachedData)

          params.total(resp.length)

          var filteredData = $filter('filter')(resp, filter);

          var transformedData = transformData(resp,filter,params)

          $defer.resolve(transformedData);

        });

      }

    }

  };

  return service;

});

json数据：

[{

            "hidden": 1,

            "launchImage": "2015_4_9_12_bb7e0a446ed74ae7ad0a3554a54183bc_1298477763",

            "name": "张三",

            "orgId": 1498031949070997504,

            "organizationId": "1498031949070997504"

        }, {

            "hidden": 1,

            "launchImage": "http://7s1rmc.com1.z0.glb.clouddn.com/2015_4_9_12_0ab5b02cf1df4ac49a7376b820816307_2127491219|39e202124ac90ec531009b0edbbbe0ba",

            "name": "李四",

            "orgId": 1498046360909250560,

            "organizationId": "1498046360909250560"

        }]

官网demo：http://bazalt-cms.com/ng-table/example/10

Angularjs ngTable使用备忘的更多相关文章

  1. angularjs ng-if 慎用 备忘

    ng-if.ng-show一般情况下可以通用,二者的最明显区别就是: ng-if判断为false时,页面dom节点不会被创建,其子节点下也不会渲染,从而也就加快了dom的加载速度:ng-show则仅是 ...

  2. AngularJS之备忘与诀窍

    译自:<angularjs> 备忘与诀窍 目前为止,之前的章节已经覆盖了Angular所有功能结构中的大多数,包括指令,服务,控制器,资源以及其它内容.但是我们知道有时候仅仅阅读是不够的. ...

  3. AngularJS资源合集[备忘]【申明:来源于网络】

    AngularJS资源合集[备忘][申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/44646597

  4. GIS部分理论知识备忘随笔

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.高斯克吕格投影带换算 某坐标的经度为112度,其投影的6度带和3度带 ...

  5. python序列，字典备忘

    初识python备忘: 序列:列表,字符串,元组len(d),d[id],del d[id],data in d函数:cmp(x,y),len(seq),list(seq)根据字符串创建列表,max( ...

  6. Vi命令备忘

    备忘 Ctrl+u:向文件首翻半屏: Ctrl+d:向文件尾翻半屏: Ctrl+f:向文件尾翻一屏: Ctrl+b:向文件首翻一屏: Esc:从编辑模式切换到命令模式: ZZ:命令模式下保存当前文件所 ...

  7. ExtJs4常用配置方法备忘

    viewport布局常用属性 new Ext.Viewport({ layout: "border", renderTo: Ext.getBody(), defaults: { b ...

  8. [备忘] Automatically reset Windows Update components

    这两天遇到Windows 10的更新问题,官方有一个小工具,可以用来修复Windows Update的问题,备忘如下 https://support.microsoft.com/en-us/kb/97 ...

  9. ECMAScript 5(ES5)中bind方法简介备忘

    一直以来对和this有关的东西模糊不清,譬如call.apply等等.这次看到一个和bind有关的笔试题,故记此文以备忘. bind和call以及apply一样,都是可以改变上下文的this指向的.不 ...

随机推荐

  1. iOS学习笔记（1）－－认识Xcode6.1的Interface Builder和常用快捷键

    Interface Builder基本界面 红色区域为工具栏(Tool Bar) 蓝色区域为导航区(Navigator Area) 绿色区域为编辑区(Editor Area) 黑色区域是调试区(Deb ...

  2. 使用cookie下次自动登录

    登录时勾选了自动登录处理: 1.加密账号和IP,保存在cookie中,cookie('auto', $value, $time) 2.解密cookie,取出账号和上次IP,判断上次IP==当前IP.账 ...

  3. ipython 导入模块 非法ascii字符问题

    SyntaxError: Non-ASCII character '\xe2‘ ipython  使用了 python2    加入 #coding=utf-8 ipython3 使用 python3

  4. Jmeter打开url时提示“请在微信客户端打开链接问题”

    前提: 1.HTTP信息头管理器已添加了“User-Agent” 2.工作台添加HTTP代理服务器(注意端口和客户端填写的代理端口要一致) 但是运行的时候总是提示“请在微信客户端打开链接” 查阅各种资 ...

  5. PIE_SDK.NET功能表

  6. C++下遍历文件夹

    编写程序遍历文件夹及其子文件夹下所有文件,并输出到标准输出流或者文件流. 1. 先考虑在单层目录下,遍历所有文件.以C:\WINDOWS为例: 用到数据结构_finddata_t,文件信息结构体的指针 ...

  7. Docker入门笔记（1）

    Docker入门笔记(1) 1.安装Docker yum -y install docker-ce 2.查看Docker版本 [root@localhost ~]# docker -v Docker ...

  8. Dijkstra实现最短路径

    #include<cstdio> #include<iostream> #include<algorithm> using namespace std; const ...

  9. VUE安装步骤1

    文件结构 用官方的 vue-cli 生成的项目文件结构如上图所示,简单介绍下上面图中各文件的作用. src 文件夹 : 1. assets 文件夹:存放各种资源文件,如图片等 2. component ...

  10. lfs

      LFS──Linux from Scratch,就是一种从网上直接下载源码,从头编译LINUX的安装方式.它不是发行版,只是一个菜谱,告诉你到哪里去买菜(下载源码),怎么把这些生东西( raw c ...