javascript - Angular - 过滤嵌套对象

Question

我有一个 JSON 对象数组，正在通过搜索进行过滤。在搜索中，我将搜索上的 ng-model 设置为 search.$，但它只搜索每个对象的顶部，但我需要to 搜索嵌套在对象内部的所有对象。在 Angular 中是否有一种简单的方法可以做到这一点？

Answer 1

可以使用自定义递归过滤器函数(有关文档，请参阅 https://docs.angularjs.org/api/ng/filter/filter )，以下示例说明了这一点:

angular.module('deepFilterTestApp', [])

  .filter('deepFilter', function($filter) {
     return function(text) {
       return function (value) {
            var searchTerm = text;
            if (angular.isObject(value)) {
                var found = false;
                angular.forEach(value, function(v,k) {
                    found = found || $filter('deepFilter')(searchTerm)(v);
                });
                return found;

            } else if (angular.isString(value)) {
                if (value.indexOf(searchTerm) !== -1) {
                    return true;
                } else {
                    return false;
                }
            }
        };
     };
  })

  .controller('DeepFilterTestController', function ($scope) {
  
         $scope.myArray = [
            {
                property1: {
                    deepProperty1: "deeepppp 1!!"
                },
                property2: {
                    deepProperty2: "deeep 2!!"
                }
            },
            {
                property1: {
                    deepProperty1: "dooop 1!!"
                },
                property2: {
                    deepProperty2: {
                        evenDeeperProperty1: "deeepest 2!!"
                    }
                }
            }
        ];

        
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="deepFilterTestApp" ng-controller="DeepFilterTestController">
   
  <p>"dooop": {{ myArray | filter : ('dooop'|deepFilter) }}</p>
  <p>"deeep": {{ myArray | filter : ('deeep'|deepFilter) }}</p>
  <p>"deeepppp": {{ myArray | filter : ('deeepppp'|deepFilter) }}</p>
  <p>"deeepest": {{ myArray | filter : ('deeepest'|deepFilter) }}</p>
  
</div>