Hello,
I have the following markup
<ion-slide-box show-pager="false">
<ion-slide ng-controller="RecipeList">
<ion-content>
<ion-list>
<ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'"
collection-item-height="getItemHeight(item, $index)"
ng-style="{height: getItemHeight(item, $index)}">
<h2>{{recipe.title}}</h2>
<p>
{{recipe.description}}
</p>
</ion-item>
</ion-list>
</ion-content>
</ion-slide>
and the following controller
.factory('Recipes', ['$resource',function($resource) {
return $resource('recipes/recipes.json');
} ]).controller('RecipeList',['$scope','$ionicSlideBoxDelegate','Recipes',function($scope,$ionicSlideBoxDelegate,Recipes){
$ionicSlideBoxDelegate.enableSlide(false);
$scope.recipes = [];
Recipes.get(function(data){
$scope.recipes = data.recipes;
});
$scope.getItemHeight = function(item, index) {
//Make evenly indexed items be 10px taller, for the sake of example
return (index % 2) === 0 ? 50 : 60;
};
}])
recipes.json has an array of length = 2; However when application is run I get
<div class="slider" show-pager="false" style="visibility: visible;"><div class="slider-slides" ng-transclude="" style="width: 1136px;">
<ion-slide ng-controller="RecipeList" class="slider-slide" data-index="0" style="width: 568px; left: 0px; transition: 300ms; -webkit-transition: 300ms; -webkit-transform: translate(0px, 0px) translateZ(0px);">
<ion-content class="scroll-content ionic-scroll has-header has-footer"><div class="scroll" style="-webkit-transform: translate3d(0px, 1.19062381056972px, 0px) scale(1);">
<ion-list class="disable-user-behavior"><div class="list">
<!-- collectionRepeat: recipe in recipes -->
<ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
<h2 class="ng-binding">{{recipe.title}}</h2>
<p class="ng-binding">
{{recipe.description}}
</p>
</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
<h2 class="ng-binding">{{recipe.title}}</h2>
<p class="ng-binding">
{{recipe.description}}
</p>
</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
<h2 class="ng-binding">{{recipe.title}}</h2>
<p class="ng-binding">
{{recipe.description}}
</p>
</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
<h2 class="ng-binding">{{recipe.title}}</h2>
<p class="ng-binding">
{{recipe.description}}
</p>
</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
<h2 class="ng-binding">{{recipe.title}}</h2>
<p class="ng-binding">
{{recipe.description}}
</p>
</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
<h2 class="ng-binding">{{recipe.title}}</h2>
<p class="ng-binding">
{{recipe.description}}
</p>
</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
<h2 class="ng-binding">{{recipe.title}}</h2>
<p class="ng-binding">
{{recipe.description}}
</p>
</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
<h2 class="ng-binding">{{recipe.title}}</h2>
<p class="ng-binding">
{{recipe.description}}
</p>
</ion-item><ion-item collection-repeat="recipe in recipes" class="item item-thumbnail-left" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(0px, 50px, 0px);">
<h2 class="ng-binding">Zesty Garlic Flavored Avocado Yogurt Dip</h2>
<p class="ng-binding">
For this recipe I'll be using a Hass avocado as I love the rich and creamy texture of it.
</p>
</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(0px, 0px, 0px);">
<h2 class="ng-binding">Refreshing Tamarind Juice.</h2>
<p class="ng-binding">
Tamarind juice wasn't a favorite for me as I much preferred making Tamarind Balls with whatever tamarind we would borrow from the neighbors tree.
</p>
</ion-item></div></ion-list>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="height: 0px; -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); -webkit-transform-origin: 50% 0%;"></div></div></ion-content>
</ion-slide>
<ion-slide class="slider-slide" data-index="1" style="width: 568px; left: -568px; transition: 300ms; -webkit-transition: 300ms; -webkit-transform: translate(568px, 0px) translateZ(0px);">
<ion-content ng-controller="RecipeDetails" class="scroll-content ionic-scroll has-header has-footer"><div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<h1>Test Content</h1>
<p>Tamarind juice wasn't a favorite for me as I much preferred making Tamarind Balls with whatever tamarind we would borrow from the neighbors tree.</p>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="height: 0px; -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1);"></div></div></ion-content>
<ion-footer-bar align-title="left" class="bar-assertive bar bar-footer">
<div class="buttons">
<button class="button">
Back
</button>
</div>
<div class="buttons">
<button class="button">
Start Audio
</button>
</div>
</ion-footer-bar>
</ion-slide>
</div></div>
Why am I getting a list of ion-items with MORE than array .length?
Note that if remove I
/*Recipes.get(function(data){
$scope.recipes = data.recipes;
});*/
I STILL get extra ion-items…WHY is that?
Note also that if I use ng-repeat instead of collection-repeat I get expected results