AngularJS, проблемы с переменной $ index в ng-repeat

Question

AngularJS, проблемы с переменной $ index в ng-repeat

0

Я пытаюсь заполнить таблицу из 2 столбцов в AngularJS. Я использую директиву ng-repeat, чтобы заполнить таблицу, но она не работает так, как я планирую. Мои $ scope.items: [Coors, Jameson, Bacardi, Corona] Я хочу, чтобы таблица выглядела так:

| Coors (0) | Джеймсон (1) |

| Бакарди (2) | Корона (3) |

однако это выглядит так:

| Coors (0) | Coors (1) |

| Бакарди (2) | Бакарди (3) |

Я смущен тем, почему директива [$ index + 1] в моем скрипте работает только в фактической части текста скрипта (в скобках), в то время как div не выглядит должным образом отображающим элементы [$ index + 1 ], и вместо этого отображает элементы [$ index]. Вот мой сценарий:

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

Кто-нибудь знает, почему это может работать не так, как предполагалось?

Изменение: Включает 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>

David Ott 27 июнь 2015, в 00:49

Источник

Теги:

javascript

ionic-framework

angularjs

1 ответ

Ещё вопросы

AL the X · Answer 1 · 2015-06-26T21-38-00.000Z

То, что вы пытаетесь сделать, кажется мне немного странным. Вместо того, чтобы пытаться разделить массив items на четные фрагменты из 2 столбцов с помощью Directive Fu, можете ли вы использовать 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>

Если вы хотите быть действительно угловатым (каламбур!), Вы можете вместо этого зарегистрировать lodash.chunk как настраиваемый фильтр:

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