如何将ngResource与ngtable选择框过滤一起使用

时间:2015-02-12 15:47:58

标签: angularjs ngtable

我在自定义过滤中使用ngtable。我用资源引入我的数据。我试图让它与一个ajax调用一起工作。当我打电话给桌子和每个选择框时,我确实让它工作了。但这并不高效。我已根据其他解决方案的建议将var数据切换到$ scope.data。它不起作用。

 var data = {};
$scope.data = DocumentUser.query();
$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    counts: [], // hide page counts control
    total: $scope.data.length, // length of data
    getData: function ($defer, params) {
      //  DocumentUser.query(function (data) {
            // use build-in angular filter
            var orderedData = params.sorting ?
                    $filter('orderBy')($scope.data, params.orderBy()) :
                    $scope.data;
            orderedData = params.filter ?
                    $filter('filter')(orderedData, params.filter()) :
                    orderedData;

            $scope.data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

            params.total(orderedData.length); // set total for recalc pagination
            $defer.resolve($scope.data);
       // });
    }
});

var inArray = Array.prototype.indexOf ?
        function (val, arr) {
            return arr.indexOf(val)
        } :
        function (val, arr) {
            var i = arr.length;
            while (i--) {
                if (arr[i] === val) return i;
            }
            return -1;
        }
$scope.DocumentTypes = function (column) {
    var def = $q.defer(),
        arr = [],
        DocumentTypes = [];
   // DocumentUser.query(function (data) {
    angular.forEach($scope.data, function (item) {
            if (inArray(item.DocumentType, arr) === -1) {
                arr.push(item.DocumentType);
                DocumentTypes.push({
                    'id': item.DocumentType,
                    'title': item.DocumentType
                });
            }
       // });
    });
    def.resolve(DocumentTypes);
    return def;
};//
$scope.DocumentLocations = function (column) {
    var def = $q.defer(),
        arr = [],
        DocumentLocations = [];
   // DocumentUser.query(function (data) {
    angular.forEach($scope.data, function (item) {
            if (inArray(item.DocumentLocation, arr) === -1) {
                arr.push(item.DocumentLocation);
                DocumentLocations.push({
                    'id': item.DocumentLocation,
                    'title': item.DocumentLocation
                });
            }
        //});
    });
    def.resolve(DocumentLocations);
    return def;
};//
$scope.DocumentPlants = function (column) {
    var def = $q.defer(),
        arr = [],
        DocumentPlants = [];
   // DocumentUser.query(function (data) {
    angular.forEach($scope.data, function (item) {
            if (inArray(item.DocumentPlant, arr) === -1) {
                arr.push(item.DocumentPlant);
                DocumentPlants.push({
                    'id': item.DocumentPlant,
                    'title': item.DocumentPlant
                });
            }
        //});
    });
    def.resolve(DocumentPlants);
    return def;
};

更新

 $scope.data = {};
$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    counts: [], // hide page counts control
    total: $scope.data.length, // length of data
    getData: function ($defer, params) {
        //  DocumentUser.query(function (data) {
        // use build-in angular filter
        var orderedData = params.sorting ?
                $filter('orderBy')($scope.data, params.orderBy()) :
                $scope.data;
        orderedData = params.filter ?
                $filter('filter')(orderedData, params.filter()) :
                orderedData;

        $scope.data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

        params.total(orderedData.length); // set total for recalc pagination
        $defer.resolve($scope.data);
    }
});

$scope.data = DocumentUser.query({}, function () {
    $scope.tableParams.reload();
});

1 个答案:

答案 0 :(得分:1)

ngResource会立即返回一个对象。对于查询,它实际上是一个附加了promise($ promise)的空数组。您的getData函数正在使用空数组构建表。有很多方法可以解决这个问题,但一个简单的事情就是在表params上调用reload(这将导致另一个getData()调用)。你可以在承诺结束时这样做。

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    counts: [], // hide page counts control
    total: $scope.data.length, // length of data
    getData: function ($defer, params) {
      //  DocumentUser.query(function (data) {
            // use build-in angular filter
            var orderedData = params.sorting ?
                    $filter('orderBy')($scope.data, params.orderBy()) :
                    $scope.data;
            orderedData = params.filter ?
                    $filter('filter')(orderedData, params.filter()) :
                    orderedData;

            orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

            params.total(orderedData.length); // set total for recalc pagination
            $defer.resolve(orderedData);
        });
    }
    $scope.data = DocumentUser.query({}, function(){
         $scope.tableParams.reload();
    });
});