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

Question

I want to alternatively repeat the json data. I've data like below:

JSON:

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

In my controller:

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

In my View:

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

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

What I want:

I want data to be display like:

Scenario 1 : one alternative repeat item

  parrot
  LION
  peacock
  LIONESS

Scenario 1 : two alternative repeat items

  parrot
  peacock
  LION
  LIONESS
  crow
  dove
  TIGER
  ELEPHANT

How to do that in angular?

Here is the plnkr: http://plnkr.co/edit/hN7odUF3MLJe4Ad9IBNM?p=preview

Answer 1

You could make a function to merge your 2 arrays into a 3rd array with the order you need, and then just iterate over that in html.

It would look something like this, if an array is longer you can append the items at the end:

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

Check this plunker to see it working.

Answer 2

You can concat the two arrays inside ng-repeat as below

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

I've just updated your plunker with this.

http://plnkr.co/edit/uOj2XrgYKzLXpurzp8Mv

Answer 3

Here is another approach:

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

In this approach, I'm creating a repeater that just uses the $index value to count through the objects:

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

The length is counted by the bird length.

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

Answer 4

Try this:

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

It's more about algorithms than AngularJS.

You can Array concat() your arrays birdInfo and animalInfo to loop through all your Objects literal having a "name" property. Then displaying "one alternative" or "two alternative" (sic) is just about playing with array Indexes.