如何通过ng-repeat结合filter根据前置GET请求的ID过滤图片？

首先咱们先理清你当前代码里的两个核心问题：

问题1：并行请求的时序隐患 #

你现在的两个$http.get是并行发起的，这有可能出现fotos数据先加载完成，但results还没返回的情况——这时候你的过滤逻辑会因为result.ID不存在直接失效，得先确保两个请求都完成后再处理数据关联。

问题2：ng-repeat过滤器语法错误 #

你写的filter: result.ID === foto.ID不符合AngularJS内置过滤器的语法，内置过滤器没法直接处理这种复杂的相等判断逻辑。

接下来给你两种可行的解决方案：

方案一：在控制器中预先关联数据（推荐） #

这种方式把逻辑放在控制器层处理，视图层只负责渲染，更高效也更清晰：

1. 用$q.all等待两个请求全部完成：

// 把两个请求包装成Promise对象
var requestResults = $http.get('https://www.immobiliaremartina.it/inc/show_all.php');
var requestFotos = $http.get('https://www.immobiliaremartina.it/inc/showFoto.php');

// 等待两个请求都成功返回后再处理数据
$q.all([requestResults, requestFotos])
  .then(function(responses) {
    var results = responses[0].data;
    var fotos = responses[1].data;
    
    $scope.results = results;
    // 这里假设你需要基于某个特定result过滤，比如列表第一个或者用户选中的项
    $scope.currentResult = results[0];
    // 提前过滤出和当前result匹配的图片
    $scope.filteredFotos = fotos.filter(function(foto) {
      return foto.ID === $scope.currentResult.ID;
    });
  })
  .catch(function() {
    alert("Errore di connessione!");
  });

2. 修改HTML直接遍历预处理好的图片列表：

<div class="slider gal" > 
  <ul class="slides" > 
    <li ng-repeat="foto in filteredFotos"> 
      <img src="/public/galleria/{{foto.URL}}"> 
    </li> 
  </ul> 
</div>

如果你的场景是要给每个result都展示对应图片，可以给每个result绑定专属图片列表：

$scope.results = results.map(function(result) {
  result.fotos = fotos.filter(function(foto) {
    return foto.ID === result.ID;
  });
  return result;
});

对应的HTML写法（先遍历results再渲染对应图片）：

<div ng-repeat="result in results">
  <h3>{{result.title}}</h3>
  <div class="slider gal" > 
    <ul class="slides" > 
      <li ng-repeat="foto in result.fotos"> 
        <img src="/public/galleria/{{foto.URL}}"> 
      </li> 
    </ul> 
  </div>
</div>

方案二：自定义AngularJS过滤器 #

如果你更倾向于在视图层用过滤器实现，可以注册一个自定义过滤器：

1. 在你的模块中添加过滤器：

angular.module('yourAppModuleName')
  .filter('matchResultId', function() {
    return function(fotos, targetId) {
      // 边界判断：数据未加载完成时返回空数组
      if (!fotos || !targetId) return [];
      return fotos.filter(function(foto) {
        return foto.ID === targetId;
      });
    };
  });

2. 同样用$q.all确保请求完成后，在HTML中使用这个过滤器：

<div class="slider gal" > 
  <ul class="slides" > 
    <li ng-repeat="foto in fotos | matchResultId: currentResult.ID"> 
      <img src="/public/galleria/{{foto.URL}}"> 
    </li> 
  </ul> 
</div>

额外提醒 #

• 一定要确认result.ID和foto.ID的类型一致（比如都是数字或都是字符串），否则相等判断会失效；
• 如果results是一个列表，你需要明确基于哪个result的ID过滤——比如用户选中的项，这时候要在$scope上维护一个currentResult变量来绑定用户选择。

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