项目中用到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. IT项目管理者常用的项目管理工具（国产VS进口）？

    对于IT项目管理工具相信很多IT项目管理者都不陌生,因为它是我们每天都要接触的,但是在前期选择IT项目管理工具的时候往往是我们最头疼的时候,所以今天我就给大家带来几款常用的国内外IT项目管理工具介绍: ...

  2. 安装mysqlclient, 链接mysql失败，提示“Library not loaded: @rpath/libmysqlclient.21.dylib”

    问题: >>> import MySQLdb Traceback (most recent call last): File "<stdin>", l ...

  3. springboot设置日志级别时报错

    配置springboot日志,输出级别为info,运行时报错: Caused by: org.springframework.boot.context.properties.bind.BindExce ...

  4. python爬虫之urllib库（三）

    python爬虫之urllib库(三) urllib库 访问网页都是通过HTTP协议进行的,而HTTP协议是一种无状态的协议,即记不住来者何人.举个栗子,天猫上买东西,需要先登录天猫账号进入主页,再去 ...

  5. django 创建QueryDict类型报错

    报错信息:django.core.exceptions.ImproperlyConfigured: Requested setting LOGGING_CONFIG, but settings are ...

  6. oracle闪回（flashback）的部分实用操作（彻底删除的除外）

    一.数据delete并且commit提交之后的闪回 (一):根据时间来恢复:1.查询数据库当前时间(目的是为了检查数据库时间是否与你电脑时间相近,避免时间不同而将数据恢复到错误时间点)select  ...

  7. gps数据上传防止android系统休眠

    最近在做关于android手机端gps定时定位的功能,需要每隔几秒钟将gps定位获取的经纬度上传至后台,但是发现某些手机在屏幕黑屏,进入休眠状态后,后台就没有收到定位信息了,后来通过网上查找资料,发现 ...

  8. Unity QualitySettings.SetQualityLevel 设置质量级别

    QualitySettings.SetQualityLevel 设置质量级别 public static void QualitySettings.SetQualityLevel(int index) ...

  9. Web测试注意事项

    参考文章:http://www.51testing.com/html/07/n-3723307.html 总结下遇到的web测试的时候需要注意的地方: 页面分辨率:  通常是计算机的默认分辨率,但是还 ...

  10. xamarin for android 环境配置

    先安装vs2010,参考以下教程可以进行破解 http://hi.baidu.com/hegel_su/item/2b0771c6aaa439e496445252?qq-pf-to=pcqq.grou ...