如何从异步调用中填充ng-table上的选择过滤器

Question

TL:博士

如何使用ajax/json填充包含"select"过滤器的ng表？

Plunk显示问题:http://plnkr.co/Zn09LV

---

详情

我试图掌握AngualrJS和ng-table扩展,虽然我可以使用工作过滤器获得一些很好的表,当我使用javascript中定义的静态数据时 - 一旦我尝试将实际数据加载到桌子我遇到了障碍.

ng-table的主体正确填充,只要我只使用文本过滤器everthing似乎正在工作:

        <td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'">
            {{user.Name}}
        </td>

工作得很好.

但是,如果我更新它以使用选择过滤器:

        <td data-title="'Name'" filter="{ 'Name': 'select' }" sortable="'Name'"  filter-data="Names($column)">
            {{user.Name}}
        </td>

我遇到了同步问题,因为在从服务器返回数据之前总是会评估Names变量.(可能在发送对服务器的请求之前评估Names varibale.)这意味着我得到了一个过滤器的空列表.

一旦数据从服务器返回 - 我似乎找不到更新选择过滤器的方法.重新运行创建过滤器列表的代码最初似乎没有效果 - 我不确定如何触发ng-table重新检查其过滤器,以便不读取更新的变量.在异步调用完成之前,我也无法找到推迟变量评估的方法.

对于我的javascript,我几乎使用了ng-table GitHub页面中的示例ajax代码,并在其上添加了select过滤器的示例代码.

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'asc'     // initial sorting
        }
    }, {
        total: 0,           // length of data
        getData: function($defer, params) {
            // ajax request to api
            Api.get(params.url(), function(data) {
                $timeout(function() {
                    // update table params
                    var orderedData = params.sorting ?
                    $filter('orderBy')(data.result, params.orderBy()) :
                    data.result;
                    orderedData = params.filter ?
                    $filter('filter')(orderedData, params.filter()) :
                    orderedData;

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

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

    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.names = function(column) {
    var def = $q.defer(),
        arr = [],
        names = [];
    angular.forEach(data, function(item){
        if (inArray(item.name, arr) === -1) {
            arr.push(item.name);
            names.push({
                'id': item.name,
                'title': item.name
            });
        }
    });
    def.resolve(names);
    return def;
};

我尝试了几次尝试添加额外的$ q.defer()并包装初始数据后跟$ scope.names函数 - 但我对promise和defer的理解不够强大,无法使任何工作.

关于GitHub的一些注释表明这是ng-table中的一个错误,但我不确定是不是这种情况,或者我只是在做一些愚蠢的事情.

https://github.com/esvit/ng-table/issues/186

关于如何进行的指示非常感谢

-Kaine-

Answer 1

我有一个类似但稍微复杂的问题.我希望能够动态更新过滤器列表,这似乎是完全可行的,因为它们应该只是在$ scope变量中.基本上,我预计,如果我有,$scope.filterOptions = [];那么我可以设置filter-data="filterOptions",该列表的任何更新将自动反映.我错了.

但我找到了一个我认为非常好的解决方案.首先,您需要覆盖ngTable选择过滤器模板(如果您不知道如何执行此操作,则涉及使用$templateCache和您需要覆盖的键'ng-table/filters/select.html').

在普通模板中,您会发现类似这样ng-options="data.id as data.title for data in $column.data"的问题,这$column.data是一个固定值,在我们更新时不会改变$scope.filterOptions.

我的解决方案是仅将$ scope 键作为filter-data传递,而不是传递整个选项列表.所以,而不是filter-data="filterOptions",我将通过filter-data="'filterOptions'",然后,在模板中进行一些小改动,如:ng-options="data.id as data.title for data in {{$column.data}}".

显然,这是选择过滤器工作方式的重大变化.在我的情况下,这是一个非常小的应用程序,只有一个表,但你可能担心这样的更改将打破你的其他选择.如果是这种情况,您可能希望将此解决方案构建到自定义过滤器中,而不是仅仅覆盖"选择".

Answer 2

您可以使用自定义过滤器实现此目的:

ngtable上标准选择过滤器的代码说:

<select ng-options="data.id as data.title for data in column.data"
    ng-model="params.filter()[name]"
    ng-show="filter == 'select'"
    class="filter filter-select form-control" name="{{column.filterName}}">
</select>

当您调用此数据时,您将通过:filter-data="names($column)"ngtable负责为您获取数据.我不知道为什么这不适用于外部资源.我敢打赌它与$ column和promise有关,正如你所指出的那样.

我在代码中做了一个快速的解决方法来避免这种情况.编写我自己的选择过滤器模板,如:

<select id="filterTest" class="form-control" 
    ng-model="tableParams.filter()['test']" 
    ng-options="e.id as e.title for e in externaldata">
</select>

您在控制器中获取此externaldata:

$scope.externaldata = Api.query(); // Your custom api call

它工作得很好,但我确实有id我的数据,所以不需要这个name功能.

我知道这个解决方案不是最优的.让我们看看有人在这里写的不仅仅是这个"解决方法"并且启发了我们.甚至esvit有时候在这里;)