数组对象内的 ng-repeat 数组对象答案

【问题标题】：ng-repeat array object inside array object数组对象内的 ng-repeat 数组对象
【发布时间】：2016-11-21 19:02:55
【问题描述】：

在我的 index.html 文件中，我们使用两个 ng-repeat 文件从 data.json 获取数据。

在这种方法中，每个数据都创建了重复的 DOM。

如何在我的 index.html 中使用单 ng-repeat 而不是双 ng-repeat。

<div ng-repeat="x in userdata">
      <item data="y" ng-repeat="y in x.content"></item>
    </div>

https://plnkr.co/edit/uGRmYSv90kbjFzx9qmkI?p=preview

【问题讨论】：

您希望输出的准确程度如何？
我想在单个 ng-repeat 中获取每个对象，但我的代码让每个结果使用一个 ng-repeat
@jos：我想使用单个 ng-repeat 来获得相同的结果
@CodeMan 您需要准备数据，而不是 userdata 它应该是所有 content 数组 imo 的串联
@codeMan 您的内容数组可以转换为地图，其中名称是键，内容作为值。将此映射添加到数组并重复它

标签： angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

您可以在 js 中为每个使用嵌套的角度，因此您可以使用最终范围使用单个 ng-repeat

Database.getDatabase().success(function(data){
      $scope.userdata=data.document;
       $scope.sample = [];
  angular.forEach($scope.userdata, function(content) {
    angular.forEach(content.content, function(content) {
      $scope.sample.push(content);
    })
  })

}).error(function(){
});

现在你可以用样本循环了

<div ng-repeat="x in sample">
     {{x.content}}
    </div>

updated with foreach

【讨论】：

我在“文档”中只有两个可用的“内容”数组对象，所以我只需要重复两次。每次 ng-repeat 我需要获取所有详细信息，例如“内容”和“名称”

【解决方案2】：

您可以这样做，而不是 $scope.userdata = data.document：

$scope.userdata = data.document.reduce(function(a, b) { 
    return a.concat(b.content);
}, []);

这会将所有content 放在同一个数组中。并完全按照您在 plunker 中的评论方式使用它

<item data="x" ng-repeat="x in userdata"></item>

这是您的 plnkr 的更新

【讨论】：

比我的更苗条

【解决方案3】：

创建一个包含内容的地图并作为另一个对象添加到文档中

var createMap = function(list) {
   var map = {};
   for(var i =0;i <list.length ; i++) {
     map[list[i].name] = list[i].content;
  }
   return map;
 };
    Database.getDatabase().success(function(data){
      for(var i =0;i <data.document.length ; i++) {
        data.document[i]['userdata'] = createMap(data.document[i].content);
      }
      $scope.userdata=data.document;
      console.log($scope.userdata);
}).error(function(){
});

plnkr here

【讨论】：