【问题标题】:Filter Array by containment in other array in ng-repeat loop在 ng-repeat 循环中通过包含在其他数组中来过滤数组
【发布时间】:2016-12-11 12:36:02
【问题描述】:

如何根据 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'
]

【问题讨论】:

  • 但是你不能在javascript中有数组对象...
  • @JSelser 从技术上讲,您可以拥有数组的数组,而数组是对象。
  • 无论如何注明的对象都有无效的语法。
  • 你能说得更准确点吗?
  • @2ps 这听起来可能违反直觉,但您提出的编辑实际上改变了问题的含义(以及结果答案的内容),因为解决 OP 问题的一部分涉及指出错误。在这种情况下,最好将问题中的代码保持原样。以下是有关问题中的代码应该和不应该如何编辑的进一步阅读:meta.stackoverflow.com/a/260246/2234742 谢谢!

标签: javascript angularjs arrays json


【解决方案1】:

这是一个基于您的代码的示例。我做了一些关键的改变:

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

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

    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;
        };
    });
<!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>

【讨论】:

    猜你喜欢
    • 2013-01-28
    • 1970-01-01
    • 1970-01-01
    • 2018-01-28
    • 1970-01-01
    • 1970-01-01
    • 2020-08-09
    • 2019-10-07
    • 1970-01-01
    相关资源
    最近更新 更多