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

Question

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

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 : unexpected token .

如果我不按 nestObj.label.

进行筛选和排序，它会很好用

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

这是说明问题的plunker。

谢谢。

Answer 1

不幸的是，嵌套对象的过滤和排序目前在 ng-table 中不是 suitable。读了这个post and solution from @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：对嵌套对象进行排序和过滤

ngtable : sort and filter on nested object

angularjs

ngtable