AngularJS传递多数组至scope.list遇ngRepeat重复项错误求助

首先咱们先拆解下你代码里的几个核心问题，这也是导致报错的根源：

• $http 并不支持同时传入两个请求配置对象，它单次只能处理一个请求——所以你的requestMenu其实根本没被执行，最后arrBirds和arrMenu都被赋值了同一个data.json的数据
• 用+拼接数组是错误操作，这会把数组直接转换成字符串，而非合并两个数组，这种畸形的数据结构直接触发了ngRepeat的重复项报错

正确解决方案：用$q.all并行处理多请求 #

AngularJS的$q.all可以帮你同时发起多个异步请求，等所有请求都成功返回后再统一处理数据，这样就能正确获取两个JSON文件的内容，再完成数组合并。

修改后的控制器代码如下：

var app = angular.module('myApp', ['ngSanitize']);
app.controller('myController', function ($scope, $http, $sce, $q) {
  // 分别定义两个请求
  var requestBirds = $http({ 
    method: 'get', 
    url: 'scripts/data.json', 
    contentType: "application/json" 
  });
  var requestMenu = $http({ 
    method: 'get', 
    url: 'scripts/menu.json', 
    contentType: "application/json" 
  });

  // 并行发起两个请求，等待全部完成后处理结果
  $q.all([requestBirds, requestMenu])
    .then(function (responses) {
      // responses[0]对应第一个请求的返回数据，responses[1]对应第二个
      $scope.arrBirds = responses[0].data;
      $scope.arrMenu = responses[1].data;
      // 用concat方法正确合并两个数组（代替错误的+操作）
      $scope.list = $scope.arrBirds.concat($scope.arrMenu);
    })
    .catch(function (error) {
      console.error('请求出错：', error);
    });
});

额外处理ngRepeat重复项 #

如果合并后的list里确实存在内容重复的元素（比如有相同id的对象），可以在ngRepeat指令里加上track by来指定唯一标识，避免报错：

<div ng-repeat="item in list track by item.id">
  <!-- 你的页面内容 -->
</div>

如果数据里没有现成的唯一标识，也可以临时用track by $index（不过更推荐给数据添加唯一ID，这是更规范的做法）。

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