javascript - 如何在 Angular JS 中重复 json 数据？

Question

我想重复 json 数据。我有如下数据:

JSON:

  {
       "birds":{
          "birdInfo":[
             {
                "name":"parrot",
                "color":"green"
             },
             {
                "name":"peacock",
                "color":"green"
             }
          ]
       },
       "animals":{
          "animalInfo":[
             {
                "name":"lion",
                "designation":"king"
             },
             {
                "name":"lioness",
                "designation":"queen"
             }
          ]
       }
    }

在我的 Controller 中:

    $scope.birdInfo = response.birds.birdInfo;
    $scope.animalInfo = response.animals.animalInfo;

在我看来:

 <div ng-repeat="bird in birdInfo">
   {{bird.name}}
 </div>

 <div ng-repeat="animal in animalInfo">
   {{animal.name}}
 </div>

我想要什么:

我希望数据显示如下:

场景 1:一种替代重复项

  parrot
  LION
  peacock
  LIONESS

场景 1:两个替代重复项

  parrot
  peacock
  LION
  LIONESS
  crow
  dove
  TIGER
  ELEPHANT

如何在 Angular 中做到这一点？

这是 plnkr:http://plnkr.co/edit/hN7odUF3MLJe4Ad9IBNM?p=preview

Answer 1

您可以创建一个函数，按照您需要的顺序将 2 个数组合并到第三个数组中，然后在 html 中对其进行迭代。

它看起来像这样，如果数组较长，您可以在末尾附加项目:

 function merge(first, second) {
   var merged = [];
   var shortest = Math.min(first.length, second.length);
   for (var i = 0; i < shortest; i++) {
     merged.push(first[i]);
     merged.push(second[i]);
   }

   if (first.length != second.length) {
     var left = first.length > second.length ? first.slice(second.length) : second.slice(first.length);
     console.log(left);
     merged = merged.concat(left);
   }
   return merged;
 }

检查this plunker看看它的工作原理。