角 - 在嵌套对象过滤器 [英] Angular - Filter on nested objects

问题描述

我有一个正在被搜索过滤JSON对象的数组。在搜索，我有 NG-模型上设置为搜索的搜索。$ ，但它仅搜索通过每个对象的顶部，但我需要搜索嵌套在物体内的所有对象。有没有一种简单的方法做，在角？

解决方案

它使用自定义的递归滤波功能（文档，看到的是有可能的 https://docs.angularjs.org/api/ng/filter/filter ），下面的例子说明吧：

\r

\r

angular.module（'deepFilterTestApp'，[]）\r
\r
  .filter（'deepFilter'，函数（$过滤器）{\r
     复位功能（文本）{\r
       复位功能（值）{\r
            VAR SEARCHTERM =文本;\r
            如果（angular.isObject（值））{\r
                VAR发现= FALSE;\r
                angular.forEach（值，函数（V，K）{\r
                    找到= ||发现$滤波器（'deepFilter'）（SEARCHTERM）（五）;\r
                }）;\r
                返回找到;\r
\r
            }否则如果（angular.isString（值））{\r
                如果（value.indexOf（SEARCHTERM）！== -1）{\r
                    返回true;\r
                }其他{\r
                    返回false;\r
                }\r
            }\r
        };\r
     };\r
  }）\r
\r
  .controller（'DeepFilterTestController'，函数（$范围）{\r
  \r
         $ scope.myArray = [\r
            {\r
                property1：{\r
                    deepProperty1：deeepppp 1 !!\r
                }，\r
                property2：{\r
                    deepProperty2：deeep 2 !!\r
                }\r
            }，\r
            {\r
                property1：{\r
                    deepProperty1：dooop 1 !!\r
                }，\r
                property2：{\r
                    deepProperty2：{\r
                        evenDeeperProperty1：deeepest 2 !!\r
                    }\r
                }\r
            }\r
        ];\r
\r
        \r
  }）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
＆LT; D​​IV NG-应用=deepFilterTestAppNG控制器=DeepFilterTestController＆GT;\r
   \r
  ＆所述; P＆gt;中dooop：{{myArray的|过滤器：（'dooop'| deepFilter）}}＆LT; / P＆GT;\r
  ＆所述; P＆gt;中deeep：{{myArray的|过滤器：（'deeep'| deepFilter）}}＆LT; / P＆GT;\r
  ＆所述; P＆gt;中deeepppp：{{myArray的|过滤器：（'deeepppp'| deepFilter）}}＆LT; / P＆GT;\r
  ＆所述; P＆gt;中deeepest：{{myArray的|过滤器：（'deeepest'| deepFilter）}}＆LT; / P＆GT;\r
  \r
＆LT; / DIV＆GT;

\r

\r

\r

I have an array of JSON objects that is being filtered by a search. In the search, I have the ng-model on the search set to search.$, but it only searches through the top part of each of the objects, but I need to to search all the objects nested inside of the objects. Is there an easy way to do that in Angular?

解决方案

It is possible using a custom recursive filter function (for docs, see https://docs.angularjs.org/api/ng/filter/filter), the following example illustrates it:

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>

这篇关于角 - 在嵌套对象过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！