项目中用到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. unity里的c#

    类方法:start只进行一次,update每一帧都会进行调用 拖动脚步到对应物体就可以将其关联 定义变量与c++相似 F2修改文件名 脚本的类名要与文件名保持一致 数组的定义:1.类型[] 数组名={ ...

  2. CentOS7 安装 Docker CE步骤

    准备工作 系统要求 Docker CE 支持 64 位版本 CentOS 7,并且要求内核版本不低于 3.10. CentOS 7 满足最低内核的要求,但由于内核版本比较低,部分功能(如 overla ...

  3. 2016级算法第五次上机-D.AlvinZH的学霸养成记III

    850 AlvinZH的学霸养成记III 思路 难题.概率DP. 第一种思考方式:直接DP dp[i]:从已经有i个学霸到所有人变成学霸的期望. 那么答案为dp[1],需要从后往前逆推.对于某一天,有 ...

  4. @PostConstruct和@PreConstruct注解

    @PostConstruct和@PreConstruct.这两个注解被用来修饰一个非静态的void()方法.而且这个方法不能有抛出异常声明. @PostConstruct //方式1 public v ...

  5. 用servlet进行用户名和密码校验01

    用servlet进行用户名和密码校验01 编写一个servlet进行用户名和密码校验,获取登录页面的用户名密码,并显示出来 1.工作目录结构 2.首先是一个login.html,包含非常简单的登录表单 ...

  6. 仿照swpu邮寄系统的登录页面

    实验过程 跟着老师的文档过了一遍手,稍作了修改 效果展示 页面在网盘: 链接:https://pan.baidu.com/s/1jsT0SDiiJXzPtR93ZAh1YA 提取码:9miq

  7. centos安装postgresql-rpm

    rpm -ivh pgdg-centos93-9.3-3.noarch.rpm确认,回车,

  8. APP高级抓包

    1.fiddler的证书安装问题时密码问题 问题:我手机下载了fiddler证书 从设置里面安装证书 可是需要输入密码 我没有设置过密码 不知道密码是什么 请问有人遇到过这样的问题的?求解决方法 因为 ...

  9. 解决 jenkins 下使用 HTML Publisher 插件后查看 html 报告显示不正常

    查看官方文档后,原来是安全问题所导致的. Jenkins安全默认是将以下功能都关闭了1.javascript2.html上的内置插件3.内置css或从其它站的css4.从其它站的图处5.AJAX 我的 ...

  10. php codeception

    前言 本测试用例只针对yii2 basic框架而写,若要支持其他框架,请自行查看phpcodeception指导(需要FQ)http://codeception.com/ yii2 basic默认已经 ...