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

时间:2015-02-08 09:56:31

标签: javascript angularjs filter

我想在控制器中使用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 filter nested object

我尝试在我的控制器中使用以下代码,但它没有用

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

2 个答案:

答案 0 :(得分:4)

这对我有用

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

答案 1 :(得分:1)

快速回答

您的屏幕必须是这样的:

<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': ""
    }
}

希望它有所帮助。