如何在Angular JS中交替重複json數據？

我想交替重複json數據。我有數據，如下面：如何在Angular JS中交替重複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

來源

2015-10-09 rajagopalx

你可以創建一個函數，將你的2個數組按照你需要的順序合併到第3個數組中，然後在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看到它的工作。

來源

2015-10-09 18:12:32 toskv

非常感謝。我會做。 – rajagopalx

當我指出我的答案時，Javascript已經給你一個連接數組的功能。你不需要創建另一個... – vinagreti

@vinagreti concat確實解決了他問的第二個問題，而不是第一個問題。 :) – toskv

它更多的是算法比AngularJS。

您可以Array concat()您的數組birdInfo和animalInfo循環遍歷所有具有「名稱」屬性的對象字面值。然後顯示「一個替代」或「兩個替代」（原文如此）就是玩數組索引。

來源

2015-10-09 18:07:15 VinceOPS

可以Concat的NG-重複內的兩個陣列如下

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

我剛剛更新了plunker與此有關。

http://plnkr.co/edit/uOj2XrgYKzLXpurzp8Mv

來源

2015-10-09 18:18:48 vinagreti

你可以發佈鏈接嗎？ – rajagopalx

http://plnkr.co/edit/uOj2XrgYKzLXpurzp8Mv – vinagreti

因爲它使用指令更簡單，因此投票贊成。 – VinceOPS

這裏是另一種方法：

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

在這種方法中，我創建只是使用$索引值通過對象來算一箇中繼器：

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

來源

2015-10-09 18:29:31 austinthedeveloper

試試這個：

`<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

來源

2015-10-09 18:41:38 Sandeep

請參閱：http://plnkr.co/edit/wAR6Jze9Xa3SBhaMOqlI?p=preview – rajagopalx

如何在Angular JS中交替重複json數據？

回答

相關問題