Angular Js过滤控制器中的嵌套数组

Angular Js Filtering nested array in controller

本文关键字：嵌套 数组 控制器 Js 过滤 Angular      更新时间：2023-09-26

我想在控制器中使用angularjs过滤器过滤嵌套数组。以下是我的样本数据

dummy=[
    {
        category:'TV',
        data:[
            {
                title: 'Game of Thrones',
                path: 'some data1',
            },
            {
                title: 'Game of Thrones-SD',
                path: 'some data2'
            },
            {
                title: 'Game of Thrones-HD',
                path: 'some data3'
            },
            {
                title: 'Game of Thrones-Trailer 1',
                path: "some data4"
            },
            {
                title: 'Game of Thrones-Trailer 2',
                path: "some data5"
            },
            {
                title: 'Game of Thrones-Trailer 3',
                path: "Ssome data6"
            },
            {
                title: 'The Vampire Diaries ',
                path: 'some data7'
            },
            {
                title: 'The Vampire Diaries -SD',
                path: 'some data8'
            },
            {
                title: 'The Vampire Diaries -HD',
                path: 'some data9'
            },
            {
                title: 'The Vampire Diaries -Trailer 1',
                path: 'some data10'
            }
        ]
    },
    {
        category:'LIVE',
        data:[
            {
                title: 'Game of Thrones - Live Show',
                path: 'some data11'
            },
            {
                title: 'The Vampire Diaries  - Live Show',
                path: 'some data11'
            }
        ]
    }
];

例如，我想过滤标题上的数据，所以如果我搜索"权力的游戏"，我想得到以下数据

    {
        category:'TV',
        data:[
            {
                title: 'Game of Thrones',
                path: 'some data1',
            },
            {
                title: 'Game of Thrones-SD',
                path: 'some data2'
            },
            {
                title: 'Game of Thrones-HD',
                path: 'some data3'
            },
            {
                title: 'Game of Thrones-Trailer 1',
                path: "some data4"
            },
            {
                title: 'Game of Thrones-Trailer 2',
                path: "some data5"
            },
            {
                title: 'Game of Thrones-Trailer 3',
                path: "Ssome data6"
            },
        ]
    },
    {
        category:'LIVE',
        data:[
            {
                title: 'Game of Thrones - Live Show',
                path: 'some data11'
            }
        ]
    }

我想这里也问过类似的问题Angularjs过滤器嵌套对象

我试着在我的控制器中使用以下代码，但它不起作用

var filterdData = $filter('filter')(content, {data: [{title: $scope.filterKey}]});

这对我有效

var filterdData = $filter('filter')(content, {data: {title: $scope.filterKey}});

快速答案：

你的屏幕一定是这样的：

<td filter="{'Object.InnerObject': 'text'}">{{row.Object.InnerObject}}</td>

在您的控制器上：

添加此函数可将ngTable的过滤器转换为AngularJS过滤器能够理解的JSON对象。

var treatJSON = function(malformedJson){
    var treatedFilters = {};
    var subObjects = [];
    var auxiliarObject;
    var objectName;
    var objectValue;
    var keys = Object.keys(malformedJson);
    for(var index = 0; index < keys.length; index++){
        auxiliarObject = null;
        subObjects = keys[index].split('.');
        // Go adding the layers from bottom to up
        for(var innerIndex = subObjects.length - 1; innerIndex >= 0 ; innerIndex--){
            // Recovery the name and the value of actual object
            objectName = subObjects[innerIndex];
            objectValue = auxiliarObject || malformedJson[keys[index]];
            // Add the objet to the treated filters or add it to the chain for the next object to use it
            if(innerIndex == 0){
                treatedFilters[objectName] = objectValue;
            } else {
                auxiliarObject = {};
                auxiliarObject[objectName] = objectValue;
            }
        }
    }
    return treatedFilters;
};

并更改getData函数以使用上面的函数：

getData: function($defer, params) {
    var filteredRecords = 
        params.filter() 
            ? $filter('filter')($scope.records, treatJSON(params.filter()))
            : $scope.records;
    $defer.resolve(filteredRecords.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    params.total(filteredRecords.length);
}

更详细的答案：

我遇到了同样的问题，并通过创建一个函数来分解视图传递的对象来解决这个问题。

问题是ngTable移交的对象。

当ngTable在filter属性上找到一个复杂对象时，它不会解析该对象，而是返回一个平面字符串。例如：

这种复杂的滤波器

<td filter="{'Object.InnerObject': 'text'}" class="text-right">

将作为返回

{'Object.InnerObject': ""}

然而，AngularJS过滤器需要一个格式良好的复杂对象来过滤字段。然后函数将最后一个例子转换为：

{
    'Object':
    {
        'InnerObject': ""
    }
}

希望能有所帮助。

相关文章：