javascript – 如何从异步调用中填充ng表上的选择过滤器

TL：博士

如何使用ajax / json填充ng表,包括“选择”过滤器？

Plunk showing the problem: http://plnkr.co/Zn09LV

详情

我正在努力掌握AngualrJS和ng表扩展,尽管我可以使用工作过滤器获取一些漂亮的表,当我使用javascript中定义的静态数据时,一旦我尝试将实际数据加载到桌子我打了一个钩子.

ng表的主体正确填充,只要我只使用文本过滤器,一切似乎都在工作：

<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>

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

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

对于我的javascript,我几乎使用了ng表格GitHub页面中的示例ajax代码,并将其添加到选择过滤器的示例代码.

$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和延迟的理解不够强大,无法使任何工作.

有几个关于GitHub的注释表明这是ng表中的一个bug,但我不知道是否是这种情况,或者我只是在做某事.

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

指针如何程序非常感激

-Kaine-

解决方法

我有一个类似但稍微复杂的问题.我想能够动态地更新过滤器的列表,这似乎完全可行,因为它们应该只在$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时,t更改.

我的解决方案是只传递$scope键作为过滤器数据,而不是传递整个选项列表.所以,而不是filter-data =“filterOptions”,我会传递filter-data =“’filterOptions”,然后在模板中放一个小的改变,如：ng-options =“data.id as data.title for data.title for {{$column.data}}中的数据.

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

javascript – 如何从异步调用中填充ng表上的选择过滤器

解决方法

相关推荐