Angularjs的ng-table与AJAX数据源，排序和过滤

我试图将ngTable directive应用于我的Rails应用程序，但不能得到正确的。我仍然是一个新手在角和这个指令似乎非常糟糕的文档(尽管有各种各样的好例子)。

所以我有一个名为$scope.users的数组，其中包含我需要的所有用户信息(例如像这样)，它来自$resource query()。

我需要用

把它变成一个表

排序
分页
从一个输入中过滤(就像这里一样)

谁能提供一个解决方案，或者至少是一个建议，如何把它们放在一起?

所以，在irc频道的wafflejock的帮助下，我已经能够把一些功能放在一起。

哪里还不对劲:

json数据集得到请求每次我改变页面，排序或其他任何东西。这是一个巨大的请求量，所以我需要把它缓存起来。
我需要能够操纵数据集从控制器更改值和删除用户，如果需要的话。我还是不知道怎么实现。

嗨Almaron(又名Malkav)我是来自IRC的wafflejock这是我能得到的最好的东西:

http://plnkr.co/edit/TUOYmM?p =

预览

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("http://www.json-generator.com/api/json/get/bUAZFEHxCG").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;  
});

基本上我设置了几个函数来做那些长行，使它更容易阅读，然后设置一个cachedData对象，我检查一下，看看它是否在调用之前填充…它看起来仍然使两个调用非常快的开始，我相信你可以避免这种情况通过使用一个标志来检查数据是否已经被加载，如果是这样，只是让它等待而不是重新调用，但不确定这是一个大的交易。

$http.get的第二个参数接受一个配置对象——它接受的其中一个键是cache，您可以将其设置为true以缓存get请求。另一种减少请求的方法是使用来自lodash或underscore的_.debounce来取消在特定时间段内发出的请求。

为了编辑数据，在你的模板中，你可以有一个带有ng-model的输入和一个带有ng-bind(或双花括号{{}})的span，并在同一个变量上为它们设置一个ng-show和ng-hide用于编辑。

第二次调用可以通过简单的if条件scope. returnlistgrid .settings().$scope!= null

相关内容

最新更新

热门标签：