Question

我想重复json数据。我的数据如下：

JSON：

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

在我的控制器中：

    $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

如何以角度进行操作？

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

Answer 1

您可以创建一个函数，将您的2个数组合并到您需要的顺序的第3个数组中，然后在html中迭代它。

它看起来像这样，如果一个数组更长，你可以在最后附加项目：

＆＃13;

 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;
 }

＆＃13;

检查this plunker是否有效。

Answer 2

你可以在ng-repeat中连接两个数组，如下所示

ng-repeat="birdOrAnimal in concatenatedData = (birdInfo.concat(animalInfo))"

我刚刚更新了你的plunker。

http://plnkr.co/edit/uOj2XrgYKzLXpurzp8Mv

Answer 3

这是另一种方法：

http://plnkr.co/edit/bV0Bd6LINmzcjQodC9Cj?p=preview

在这种方法中，我创建了一个只使用$ index值来计算对象的转发器：

<div ng-repeat="i in getNumber(number) track by $index">
    <p>{{birdInfo[$index].name}} - {{birdInfo[$index].color}}</p>
    <p>{{animalInfo[$index].name}} - {{animalInfo[$index].designation}}</p>
</div>

长度按鸟的长度计算。

$scope.number = $scope.birdInfo.length;
      $scope.getNumber = function() {
      return new Array($scope.number);
}

Answer 4

试试这个：

`<div ng-repeat="bird in birdInfo" ng-if="birdInfo.length>=animalInfo.length">
   <div>{{bird.name}} - {{bird.color}}</div>
   <div>{{animalInfo[$index].name}} - {{animalInfo[$index].designation}}</div>
 </div>
 <div ng-repeat="ani in animalInfo" ng-if="birdInfo.length<animalInfo.length">
   <div>{{birdInfo[$index].name}} - {{birdInfo[$index].color}}</div>
   <div>{{ani.name}} - {{ani.designation}}</div>
 </div>`

see this plunker

Answer 5

算法比AngularJS更多。

您可以Array concat()您的数组birdInfo和animalInfo循环遍历所有具有＆＃34;名称＆＃34;属性。然后显示＆＃34;一个替代＆＃34;或＆＃34;两个替代＆＃34; （原文如此）只是玩数组索引。

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

5 个答案: