项目中用到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. c语言-折半查找的函数

    void search(int n,int num[],char name[N][10]) { int top,bottom,middle,location,flag; top=0; bottom=N ...

  2. javascript canvas画订单

    前段时间看了某个平台的后台,发现订单显示使用的canvas进行绘画(插件echarts),直观,明了的表达出了订单的走势如下 所以自己心痒痒的,就自己模仿了一个-->贴上代码 <style ...

  3. 微信智能机器人助手，基于hook技术，自动聊天机器人

    下载地址: 链接:https://pan.baidu.com/s/1N5uQ3gaG2IZu7f6EGUmBxA 提取码:md7z 复制这段内容后打开百度网盘手机App,操作更方便哦 微信智能助手说明 ...

  4. Machine learning吴恩达第三周 Logistic Regression

    1. Sigmoid function function g = sigmoid(z) %SIGMOID Compute sigmoid function % g = SIGMOID(z) compu ...

  5. linux 常用命令手册

    命令 功能说明 线上查询及帮助命令(2个) man 查看命令帮助,命令的词典,更复杂的还有info,但不常用. help 查看Linux内置命令的帮助,比如cd命令. 文件和目录操作命令(18个) l ...

  6. jenkins 判断是手动触发还是定时器触发

    根据变量BUILD_CAUSE的值可以判断本次触发是手动触发还是定时器触发 手动触发:MANUALTRIGGER 定时器触发:TIMERTRIGGER

  7. php中慎用==

    var_dump(' 123fg456'==123);var_dump('some string' == 0);var_dump(123.0 == '123d456');var_dump(0 == & ...

  8. Map.Entry使用详解

    1.Map.Entry说明 Map是java中的接口,Map.Entry是Map的一个内部接口. Map提供了一些常用方法,如keySet().entrySet()等方法,keySet()方法返回值是 ...

  9. oracle--dump 事务槽

    01,创建环境 SQL> create table t3 (id int); Table created. SQL); row created. SQL); row created. SQL); ...

  10. java io 模型重点讲述

    java io 模型重点讲述 bio(阻塞) 同步IO 接受请求与处理请求用同一条线程 aio 应用程序线程会向系统注册一个socket请求,以及一个回调方法,继续执行下去.socket接受区的数据监 ...