I have a weird problem in my view. I have two div - the first contains ng-repeat while the second contains a collection-repeat. Below is the code:
<ion-view view-title={{header2}}>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="padding">
<div ng-repeat="itemgroup in main.products | groupBy: '[category, itemStatus]'" ng-if="itemgroup[0].itemStatus=='OPEN'"> <div class="row" ng-repeat="item in itemgroup" ng-if="item.itemStatus=='OPEN'">
<div class="col col-80" >
<button ng-class="{'fulfilled': item.lineThrough}"
class="row btnElement button button-{{item.ionicButtonColor}}"
ng-click="editDetail(item)"
ng-disabled="item.itemStatus!='OPEN'">{{item.displaydetail}}</button>
</div>
</div>
</div>
<div ng-if="allprod==true" class="list">
<div class="row" collection-repeat="product in allproducts | filter:listData.header.newProduct"
collection-item-height="getItemHeight(product)"
collection-item-width="'100%'">
<button class="col col-90 btnElement button round outline" ng-disabled="productSelected==true" ng-click="add(product)">
<span ng-if="product.category !=null" >{{ product.category }} </span>
<span ng-if="product.productname !=null" >{{ product.productname }} </span>
</button>
<button class="col col-10 button button-icon ion-trash-a input-button"
ng-disabled = "product.productIdentifier2=='Master'"
ng-click="deleteProduct(product)"></button>
</div>
</div>
</ion-content>
This initially displays correctly since the array main.products is empty. However, as I add elements to the main.product array, and scroll down on the collection-repeat items, there is a gap that builds between the two divs. I seems like the view thinks it’s still showing items from the main.products. Is this a bug in ionic?
If I scroll up to view more elements from the main.product array, the space disappears: