angularjs表格ng-table使用备忘录

 更新时间:2016年03月09日 17:17:53   作者:彼岸花在开  
这篇文章主要为大家分享了angularjs表格ng-table使用备忘录,感兴趣的小伙伴们可以参考一下

项目中用到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"
    }]

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关文章

  • node.js中path路径模块的使用方法实例分析

    node.js中path路径模块的使用方法实例分析

    这篇文章主要介绍了node.js中path路径模块的使用方法,结合实例形式分析了node.js path路径模块的基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
    2020-02-02
  • 在node中如何使用 ES6

    在node中如何使用 ES6

    这篇文章主要介绍了在node中如何使用 ES6 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • node.js从前端到全栈的必经之路

    node.js从前端到全栈的必经之路

    这篇文章主要介绍了一下什么是node,以及node环境配置,之后我们就将开始深入去学习node了,感兴趣的小伙伴可以深入了解阅读一下
    2023-03-03
  • Node.js 8 中的 util.promisify的详解

    Node.js 8 中的 util.promisify的详解

    本篇文章主要介绍了Node.js 8 中的 util.promisify的详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Nginx设置为Node.js的前端服务器方法总结

    Nginx设置为Node.js的前端服务器方法总结

    在本篇文章中小编给大家分享了关于Nginx设置为Node.js的前端服务器的方法和实例,需要的朋友们学习下。
    2019-03-03
  • window系统 nodejs安装opencv环境配置图文详解

    window系统 nodejs安装opencv环境配置图文详解

    这篇文章主要介绍了window系统 nodejs安装opencv环境配置,结合图文形式详细分析了window环境下 nodejs安装opencv的具体步骤、注意事项
    2023-04-04
  • Node.js读写文件之批量替换图片的实现方法

    Node.js读写文件之批量替换图片的实现方法

    下面小编就为大家带来一篇Node.js读写文件之批量替换图片的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 深入解读Node.js中的koa源码

    深入解读Node.js中的koa源码

    这篇文章主要介绍了深入解读Node.js中的koa源码,任何一个框架的出现都是为了解决问题,而Koa则是为了更方便的构建http服务而出现的。 可以简单的理解为一个HTTP服务的中间件框架。,需要的朋友可以参考下
    2019-06-06
  • windows系统下安装npm(Node.js)方法教程

    windows系统下安装npm(Node.js)方法教程

    在Windows环境下进行Node.js的安装并不是一件复杂的事情,但是在安装过程中需要注意一些细节,下面这篇文章主要给大家介绍了关于windows系统下安装npm(Node.js)的相关资料,需要的朋友可以参考下
    2023-12-12
  • node.js中的fs.symlinkSync方法使用说明

    node.js中的fs.symlinkSync方法使用说明

    这篇文章主要介绍了node.js中的fs.symlinkSync方法使用说明,本文介绍了fs.symlinkSync的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12

最新评论