项目中用到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. chrome cpu占用100%

    参考原文地址:https://stackoverflow.com/questions/20276097/chrome-devtools-100-cpu 问题描述,chrome打开devtools开发者 ...

  2. Intellij IDEA 封装Jar包（提示错误: 找不到或无法加载主类）

    封装的过程如下: 然后准备打包 选择Build或者ReBuild即可. 但这样就会引起开始第一个图的问题.提示无法加载主类,另外一个情况就是所有的外部第三方jar包都被封装到一个jar包里面了. 那么 ...

  3. UltraFast设计法实践(1) -- 初始设计检查

    目录 1. report_failfast 1.1 命令使用 1.2 优化 1.3.总结 2.report_timing_summary 3. report_methodology 4. 总结 5.遗 ...

  4. [转] Ansible 系列之 Playbooks 剧本

    [From] https://www.cnblogs.com/hanyifeng/p/6435875.html 一.Playbooks 介绍 1.Playbooks是Ansible的配置,部署和编排语 ...

  5. 关于dedecms数据量大以后生成目录缓慢的问题解决

    四月份的时候博客被封.我不知情.因为一直很忙,没有来得及看.前两天来看以后,发现居然被封,吓傻了我. 赶紧找原因,原来是转载了某个人的博文,被他举报了,然后就被封了. 觉得很伤心,毕竟这个博客陪伴了我 ...

  6. oracle--块信息深入解析

    一,创建 Data Block是数据库中最小的I/O单元 01,建立一个新的表空间 查看默认表空间位置 select TABLESPACE_NAME,FILE_NAME from dba_data_f ...

  7. 解决重装 Oracle 出现的 INS-32025 问题，完全卸载 Oracle11g

    如果您要重装 Oracle,并且安装程序正在运行,请先关闭它. 完全卸载: 1.停止所有 Oracle 服务 2.通过开始菜单 Oracle Installation Products -> U ...

  8. 为什么要实现Serializable

    工作中我们经常在进行持久化操作和返回数据时都会使用到javabean来统一封装参数,方便操作,一般我们也都会实现Serializable接口,那么问题来了,首先:为什么要进行序列化:其次:每个实体be ...

  9. CSS的引入

    CSS的引入方式: 1.将样式规则写在css样式文件中,再以<link>标签引入. <link rel=stylesheet type="text/css" hr ...

  10. jquery清空下拉框，保留第一个

    js中可以document.getElementById("id").options.length = 1;设置 jquery中的设置方法:$("#id option[i ...