如何合并四次$http.get请求结果到单个$scope变量并在HTML展示

嗨，我来帮你搞定这个问题！你之前重复创建同名控制器的做法肯定行不通——AngularJS里同名控制器会被最后定义的那个覆盖，而且每个控制器的作用域是独立的，自然没法把数据合并到一起。咱们换个正确的思路，用一个控制器+$q服务来并行处理所有请求，等所有数据都返回后再合并到同一个$scope变量里。

angular.module('你的模块名').controller('serviciosAdminCtrl', ['$scope', '$http', '$q', function($scope, $http, $q) {
  // 定义所有需要请求的API地址
  const apiUrls = [
    'api/hoteles',
    'api/paseos',
    'api/aseos',
    'api/entrenamientos'
  ];

  // 把每个$http.get请求转换成promise，存入数组
  const requestPromises = apiUrls.map(url => $http.get(url));

  // 使用$q.all等待所有请求完成
  $q.all(requestPromises)
    .then(responseArray => {
      // responseArray里是每个请求的响应对象，data属性是接口返回的数据
      // 合并所有数据到serviciosAdminRecords
      $scope.serviciosAdminRecords = responseArray.reduce((mergedData, response) => {
        // 假设每个接口返回的都是数组，用concat合并
        return mergedData.concat(response.data);
      }, []);
    })
    .catch(error => {
      // 处理请求失败的情况，比如打印错误信息
      console.error('请求出错:', error);
    });
}]);

• 单一控制器：只定义一个serviciosAdminCtrl，所有请求逻辑都放在这里，彻底避免作用域隔离导致的数据无法合并问题。
• $q.all()：AngularJS的$q服务提供的这个方法，能把多个异步请求的promise打包成一个。只有当所有请求都成功返回时，才会进入then回调；如果有任何一个请求失败，会直接触发catch回调帮你排查问题。
• 数据合并：用reduce配合concat，把每个接口返回的数组合并成一个大数组，这样HTML里的ng-repeat就能直接遍历serviciosAdminRecords展示所有数据了。

如果不同接口返回的数据结构不一样，或者你需要在页面上区分不同类型的服务，可以给每条数据加个类型标识：

// 修改reduce里的处理逻辑，给每条数据添加类型标记
$scope.serviciosAdminRecords = responseArray.reduce((mergedData, response, index) => {
  // 从API地址里提取服务类型，比如从api/hoteles得到hoteles
  const servicioTipo = apiUrls[index].split('/')[1];
  // 给每条数据添加类型字段
  const formattedItems = response.data.map(item => ({
    ...item,
    tipo: servicioTipo
  }));
  return mergedData.concat(formattedItems);
}, []);

之后在HTML里就能用{{item.tipo}}来区分酒店、行程这类不同的服务类型了。

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