Angularjs table ng-table usage memorandum, angularjsng-table

Angularjs table ng-table usage memorandum, angularjsng-table

The ng-table used in angularjs in the project has powerful functions, such as searching, sorting, checkbox, paging, and the number of tables displayed on each page. API and demo can only be referenced on the official website. Here is a memo, which will definitely be used one day.

HTML:

<! DOCTYPE html> <meta charset = "UTF-8"/> 
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 data:
[{"Hidden": 1, "launchImage": "success", "name": "Zhang San", "orgId": 1498031949070997504, "organizationId": "1498031949070997504 "}, {"hidden": 1, "launchImage": "http://7s1rmc.com1.z0.glb.clouddn.com/2015_4_9_12_0ab5b02cf1df4ac49a7376b820816307_2127491219 | 39e202124ac90ec531009b0edbbbe0ba", "name": "Li Si", "orgId": 1498046360909250560, "organizationId": "1498046360909250560"}]
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

 

 
  
AngularJS basic knowledge note table
 
  
Detailed description of table use in AngularJS
 
  
Use angularjs to create a simple table
 
  
Angularjs table Paging
 
  
How to Use angularjs to create a complete table
 
  
Define a table in Directive in AngularJS