javascript - Angular ngtable中带有组合框的过滤列

Question

我正在尝试使用类似于 this example 的 ngtable 在 angularjs 表中实现“自定义过滤” ，但在我的例子中，“数据”是异步获取的，这需要一些时间。我面临的问题是，当访问页面时， Controller 中的这个函数(而其他函数工作正常)从不运行，调试时它只是跳过它。

$scope.docNames = function(column) {
    var def = $q.defer(),
        arr = [],
        names = [];
    angular.forEach(data, function(item){
        if (inArray(item.name, arr) === -1) {
            arr.push(item.name);
            docNames.push({
                'id': item.Name,
                'title': item.Name
            });
        }
    });
    def.resolve(docNames);
    return def;
};

我的 ngTable 对象:

$scope.tableParams = new ngTableParams(
    {
        page: 1,
        count: 10,
        sorting: {
            Date: 'desc'
        }
     },
     {
         total: 0,
         getData: function ($defer, params) {

             factory.getData().then(function (result) {
                 documents = result.data;

                 //filtering
                 var orderedData = params.filter() ?
                     $filter('filter')(documents, params.filter()) :
                     documents;

                 //sorting
                 orderedData = params.sorting() ?
                     $filter('orderBy')(orderedData, params.orderBy()) :
                     orderedData;

                 //pagination
                 $scope.documents = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
                 params.total(orderedData.length);
                 $defer.resolve($scope.documents);
            });
       }
  });

我的 html:

<table data-ng-table="tableParams" data-show-filter="true" class="table table-striped">
    <tr data-ng-repeat="document in $data">
        <td data-title="'Name'" filter="{ 'Name': 'select' }" filter-data="docNames($column)" data-sortable="'Name'">{{ document.Name }} </td>
        <td data-title="'Size'" filter="{ 'Size': 'text' }" data-sortable="'Size'">{{ document.Size }}</td>
        <td data-title="'Date'" data-sortable="'Date'">{{ document.Date }}</td>
    </tr>
</table>

Answer 1

正如预测的那样，在评估“docNames”列表时尚未加载“文档”。我们通过在第一次使用 defer 之前解析 defer 来解决这个问题:

var qDocse = $q.defer();
qDocs.resolve(factory.getData());
$scope.tableParams = new ngTableParams(
    {
        page: 1,
        count: 10,
        sorting: {
             Date: 'desc'
        }
    },
    {
        total: 0,
        getData: function ($defer, params) {
            qDocs.promise.then(function (result) {
                documents = result.data;

                //filtering
                var orderedData = params.filter() ?
                    $filter('filter')(documents, params.filter()) :
                    documents;

                //sorting
                orderedData = params.sorting() ?
                    $filter('orderBy')(orderedData, params.orderBy()) :
                    orderedData;

                //pagination
                $scope.documents = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
                params.total(orderedData.length);
                $defer.resolve($scope.documents);
            });
       }
  });

和

$scope.docNames = function (column) {
    var def = $q.defer(),
        arr = [],
        docNames = [];
    qDocs.promise.then(function (result) {
        angular.forEach(result.data, function (item) {
            if (inArray(item.Name, arr) === -1) {
                arr.push(item.Name);
                docNames.push({
                    'id': item.Name,
                    'title': item.Name
                    });
                }
            });
        });
     def.resolve(docNames);
     return def;
};