AngularJS，ng-repeat 中 $index 变量的问题

Question

I'm trying to fill out a 2 column table in AngularJS. I'm using ng-repeat directive to fill out the table, but it's not's working the way I'm planning. My $scope.items is: [Coors, Jameson, Bacardi, Corona] I want the table to look like this:

---

| Coors (0) | Jameson (1) |

| Bacardi (2) | Corona (3) |

however, it looks like this:

---

| Coors (0) | Coors (1) |

| Bacardi (2) | Bacardi (3) |

I'm confused as to why the [$index+1] directive in the my script is only working in the actual text portion of the script (in parenthesis), while the <item-card> div does not seem to properly displaying items[$index+1] , and instead is displaying items[$index] . Here is my script:

<div class=row ng-repeat="item in items" ng-if="$index %2 ==0">
  <div class="col col-50" ng-if="$index < items.length">
    <item-card item="{{item[$index]}}"></item-card>
    ({{$index}})
  </div>
  <div class="col col-50" ng-if="$index +1 < items.length">
    <item-card item="{{items[$index+1]}}"></item-card>
    ({{$index+1}})
  </div>
</div>

Does anyone know why this might not be working as intended?

Edit: Including is itemcard.html .

<div class = "card" >
  <img id = "cardImage" ng-src= "data:image/jpeg;base64,{{item.image}}" width = "100%"/>
      {{item.cartQuantity}}
  <cardHeader>{{item.itemName}}</cardHeader><br>
  <cardHeader ng-if= "item.paksize >1">{{item.paksize}} pack</cardHeader>
  <button class="button" ng-click="addToCart(item)">+</button>
  <button class="button" ng-click="decrementCart(item)">-</button>
</div>

Answer 1

What you're trying to do seems a little odd to me. Rather than trying to split the array of items into even chunks of 2 columns with Directive Fu, might you consider using lodash.chunk ?

<script>
  angular.module('example', [ ])
    .run(function($scope){
      $scope.items = _.chunk([ /* . . . */ ], 2);
    });
</script>
<div ng-app="example">
  <div class=row ng-repeat="chunk in items">
    <div class="col col-50">
      <item-card item="{{chunk[0]}}"></item-card>
      ({{$index}})
    </div>
    <div class="col col-50">
      <item-card item="{{chunk[1]}}"></item-card>
      ({{$index+1}})
    </div>
  </div>
</div>

If you wanted to be really Angular about it (a pun!), you could register lodash.chunk as a custom Filter instead:

<script>
  angular.module('example', [ ])
    .run(function($scope){
      $scope.items = [ /* . . . */ ];
    })
    .filter('chunk', function(){
      return _.chunk;
    });
</script>
<div ng-app="example">
  <div class=row ng-repeat="chunk in items | chunk:2">
    <div class="col col-50">
      <item-card item="{{chunk[0]}}"></item-card>
      ({{$index}})
    </div>
    <div class="col col-50">
      <item-card item="{{chunk[1]}}"></item-card>
      ({{$index+1}})
    </div>
  </div>
</div>