Я пытаюсь заполнить таблицу из 2 столбцов в AngularJS. Я использую директиву ng-repeat, чтобы заполнить таблицу, но она не работает так, как я планирую. Мои $ scope.items: [Coors, Jameson, Bacardi, Corona] Я хочу, чтобы таблица выглядела так:
однако это выглядит так:
Я смущен тем, почему директива [$ 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>
То, что вы пытаетесь сделать, кажется мне немного странным. Вместо того, чтобы пытаться разделить массив 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>