Question

我尝试将ngTable directive应用到我的Rails应用中，但无法正确使用。我仍然是一个有角度的新人，这个指令看起来很难记录（虽然有很多很好的例子）。

所以我有一个名为$scope.users的数组，其中包含我需要的所有用户信息（例如like this），该数据来自$resource query()。

我需要把它变成一张表：

排序
分页
从一个输入过滤（如已完成over here）

有人可以提供解决方案，或至少提供一些如何将它们放在一起的建议吗？

更新

所以，在irc频道的wafflejock的大力帮助下，我已经能够整合一些功能。这是the plunk。

还有什么问题：

每次更改页面，排序或其他任何内容时，都会请求json数据集。这是一个巨大的请求，所以我需要它以某种方式缓存。
我需要能够操纵控制器中的数据集来更改值并在需要时删除用户。仍然不知道如何实现这一点。

Answer 1

嗨Almaron（又名Malkav）我是来自IRC的wafflejock，这是我能做到最好的事情：

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

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对象，我检查它是否在调用之前填充...看起来它仍然使一开始我很快就打了两个电话我确信你可以通过使用一个标志来检查数据是否已经被加载来避免这种情况，如果是这样，只是让它等待而不是重做电话，但不确定这是一个大问题。

Answer 2

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

对于编辑数据，在模板中，您可以输入ng-model和带有ng-bind（或双花括号{{}}）的范围，并在其上显示ng-show和ng-hide它们的相同变量用于编辑。

Answer 3

可以通过简单的条件 scope.returnListGrid.settings（）来阻止第二次调用。$ scope！= null

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

3 个答案: