Question

我有一个要在ngTable表上显示的对象列表。我的对象看起来像：

obj {label:string,
     nestObj{nestLabel:string
            }
    }

在我的控制器中，我想允许对字段'label'和'nestObject.label'进行排序和过滤。我试过这个：

$scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,
        filter: {
            label='',
            nestObj.label=''
        },
        sorting: {
            label: 'asc',
            nestObj.label: 'asc'
        }
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var filteredData = params.filter() ?
            $filter('filter')(data, params.filter()) :
            data;
            var orderedData = params.sorting() ?
                    $filter('orderBy')(filteredData, params.orderBy()) :
                    data;

            params.total(orderedData.length); // set total for recalc pagination
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }          
});

但是我收到错误，javascript编译器不喜欢nestObj.label上的过滤器：

uncaugth syntexError：意外令牌。

如果我不对nestObj.label进行过滤和排序，那么IT运行良好。

是否可以使用ngTable对嵌套对象进行过滤和排序？

以下是说明问题的plunker。

谢谢。

Answer 1

不幸的是，目前使用嵌套对象进行过滤和排序并不适合ng-table。从@ post读取这个Kostia Mololkin和解决方案，我终于明白了如何避免这个错误，解决方案最终非常简单。非常感谢他！

我刚刚重写了数据在哪里是你的数据：初始化新属性并将嵌套对象的数据设置为新属性，如：

for (var i = 0; i < data.length; i++) {
  data[i].town = ""; //initialization of new property 
  data[i].town = data[i].adresse.town;  //set the data from nested obj into new property
}

您可以在plunker上看到此解决方案，现在它的工作就像一个魅力...

Answer 2

在我遇到的时候加上我的两分钱，不要害怕使用函数式编程。扁平数据很简单，在我看来更清洁：

var flattenedArray = dataArray.map(function(obj) {
    return {
        label: obj.label,
        nestedLabel: dataItem.nestedObj.nestedLabel
    };
});

然后，您可以轻松地在ngTable中按label和nestedLabel排序。

注意：我意识到我们正在制作副本，因此会消耗更多的内存。

Answer 3

这是一个支持嵌套参数的getData方法，以及对排序和分页的额外支持。需要注入$filter并使用您自己的数据数组重命名myData。希望它可以提供帮助。

$scope.tableParams = new NgTableParams({},
{
    getData: function($defer, params) {

        // organize filter as $filter understand it (graph object)
        var filters = {};
        angular.forEach(params.filter(), function(val,key){
            var filter = filters;
            var parts = key.split('.');
            for (var i=0;i<parts.length;i++){
                if (i!=parts.length-1) {
                    filter[parts[i]] = {};
                    filter = filter[parts[i]];
                }
                else {
                    filter[parts[i]] = val;
                }
            }
        })

        // filter with $filter (don't forget to inject it)
        var filteredDatas =
            params.filter() ?
                $filter('filter')(myDatas, filters) :
                myDatas;

        // ordering
        var sorting = params.sorting();
        var key = sorting ? Object.keys(sorting)[0] : null;
        var orderedDatas = sorting ? $filter('orderBy')(filteredDatas, key, sorting[key] == 'desc') : filteredDatas;

        // get for the wanted subset
        var splitedDatas =
            orderedDatas.slice((params.page() - 1) * params.count(),
                params.page() * params.count());

        params.total(splitedDatas.length);

        // resolve the ngTable promise
        $defer.resolve(splitedDatas);
    }
});

ngtable：对嵌套对象进行排序和过滤

3 个答案: