通过ng-repeat循环中的其他数组中的包含过滤数组

时间:2016-12-11 12:36:02

标签: javascript angularjs arrays json

如何根据ng-repeat中的其他数组过滤数组的结果。

我要过滤的数组:

[
    [
    'gender': 'male',
    'languages': ['German', 'English'],
    'country': 'Marocco'
    ],
    [
    'gender': 'female',
    'languages': ['German', 'French'],
    'country': 'Kosovo'
    ]
] 

我想按此对象进行过滤:

   | filter:{'languages': ['Urdu', 'French'], 'country': ['Kosovo']}

预期结果:

[
'gender': 'female',
'languages': ['German', 'French'],
'country': 'Kosovo'
]

1 个答案:

答案 0 :(得分:1)

以下是基于您的代码的示例。我做了一些重要的改变:

  1. 您的数据数组是一个对象数组。

  2. 我将国家/地区更改为过滤器对象中的值。如果你还是 希望它是一个数组,然后只需更改自定义中的代码 过滤器就像语言一样工作。

  3. 
    
        var app = angular.module('myApp',[]);
    
        app.controller('MyCtrl', ['$scope', function($scope) {
            $scope.data= [
                {
                    'gender': 'male',
                    'languages': ['German', 'English'],
                    'country': 'Marocco'
                },
                {
                    'gender': 'female',
                    'languages': ['German', 'French'],
                    'country': 'Kosovo'
                }
            ];
        }]);
    
        // Custom filter for our objects
        app.filter('myFilter', function () {
            return function (people, filterPerson) {
                var filtered = [];
    
                // Check if any elements in checkArray are in sourceArray
                var includesAny= function(checkArray,sourceArray){
                    checkArray.forEach(function(element) {
                        if (sourceArray.includes(element)){return true;}
                    });
                    return false;
                };
    
                for (var i = 0; i < people.length; i++) {
                    var person = people[i];
                    if (filterPerson.country && filterPerson.country != person.country) {
                        continue;
                    }
    
                    if (filterPerson.gender && filterPerson.gender != person.gender) {
                        continue;
                    }
    
                    if (filterPerson.languages && includesAny(filterPerson.languages,person.languages)) {
                        continue;
                    }
    
                    filtered.push(person);
                }
                return filtered;
            };
        });
    &#13;
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <title>AngularJS Example</title>
    
        <!-- AngularJS -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    
    
    </head>
    <body ng-app="myApp">
    
    <div ng-controller="MyCtrl">
        <h1>Unfiltered Data</h1>
        <ul>
            <li ng-repeat="person in data">
                {{ person }}
            </li>
        </ul>
    
        <h1>Filtered Data</h1>
        <ul>
            <li ng-repeat="person in data | myFilter:{'languages': ['Urdu', 'French'], 'country': 'Kosovo'}">
                {{ person }}
            </li>
        </ul>
    </div>
    
    </body>
    </html>
    &#13;
    &#13;
    &#13;