AngularJS JSON目录搜索过滤功能失效求助

我想给JSON格式的目录实现搜索过滤效果，但当前代码无法正常运行。以下是我的前端代码：

<input type="text" style="width:275px;margin-top:5px;" class="form-control form-control-sm form-control-rounded" placeholder="Search..." ng-model="search"> 
<br /> <br /> 
<div class="panel-body"> 
  <div class="cui-ecommerce--catalog"> 
    <div class="row"> 
      <div ng-repeat="(name, text) in textures | filter:search"> 
        <div ng-repeat="url in text"> 
          <div> {{url.url}} 
            <a href="javascript: void(0);" style="cursor:default;"> 
              <img ng-src="{{url.url }}" /> 
            </a> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

问题根源 #

你当前用了AngularJS自带的filter:search，但你的数据结构是外层为对象、内层嵌套数组的形式（textures里每个属性对应一个包含url对象的数组），默认的filter过滤器只能浅层次遍历对象，没法深入到嵌套的数组里匹配url.url这类字段，也没法同时匹配分类名称和内容，所以过滤功能失效。

解决步骤 #

你需要自定义一个过滤器来处理这种嵌套结构的搜索：

1. 添加自定义过滤器：在你的AngularJS控制器所在的模块中注册这个过滤器：

angular.module('yourAppName', [])
.filter('textureFilter', function() {
  return function(textures, searchTerm) {
    // 如果没有搜索词，直接返回全部内容
    if (!searchTerm) return textures;
    
    const filteredResults = {};
    const lowerCaseSearch = searchTerm.toLowerCase();
    
    // 遍历每个分类
    angular.forEach(textures, function(imageItems, categoryName) {
      // 检查分类名称是否匹配
      const categoryMatches = categoryName.toLowerCase().includes(lowerCaseSearch);
      // 筛选出当前分类中URL匹配的项
      const matchingImages = imageItems.filter(item => 
        item.url.toLowerCase().includes(lowerCaseSearch)
      );
      
      // 只要分类名匹配，或者有匹配的图片项，就保留这个分类
      if (categoryMatches || matchingImages.length > 0) {
        filteredResults[categoryName] = categoryMatches ? imageItems : matchingImages;
      }
    });
    
    return filteredResults;
  };
});

2. 替换HTML中的过滤指令：把原来的filter:search换成自定义的过滤器：

<div ng-repeat="(name, text) in textures | textureFilter:search">

这样修改后，搜索框输入内容时，会同时匹配分类名称和图片的URL路径，完美实现你想要的过滤效果。

内容的提问来源于stack exchange，提问作者bafix2203