Greetings.
In hopes of someone helping me out, I’m writing on the forums again.
I’m currently building a Product Catalogue-ish module where I will first fetch the list of products which will looks a little like this.
{
id:1,
category:1,
title:"Iridium Batteries",
desc:"Technology Everlasting Lifespan Made Batteries",
feat_image: "img/product/img_feat_1.png"
}
and a list of categories which has a structure something like this.
{ id:1, name: 'Batteries' }
As for what I currently have, I created a ion-slide-box
<ion-slide-box show-pager="true" does-continue="false" delegate-handle="products">
and a ion-slide that looks like the following
<ion-slide ng-repeat="item in products|filter:{ category: filters.category }" ng-style="{ 'background-image': 'url({{site_path}}{{item.feat_image}})' }" on-finish-render="ngRepeatFinished">
So when the page gets rendered, everything works fine with all the products from the list showing up with proper pagination created and what not but the real problem starts when I filter the list. As you probably can notice from the ion-slide example I posted, there is a | filter:{ category: filters.category} where filters.category is set by the following scope function
$scope.setFilter = function( category ){
$scope.filters.category = category.id;
$scope.filters.label = category.name;
$scope.filters.show = false;
setTimeout(function(){ $scope.$apply(); }, true);
var filtered = $filter('filter')($scope.products, { category:$scope.filters.category} );
if( filtered.length == 0 )
{
$ionicSlideBoxDelegate.$getByHandle('products').update();
}
};
Also to add, I have a directive that watches when the ng-repeat is fully rendered after filtering (not sure if it works) which will call update() on render complete. Here’s the code.
// The listener
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
setTimeout(function(){
$ionicSlideBoxDelegate.$getByHandle('products').update();
}, 500);
});
// The trigger
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
})
Here’s when it be comes a little bit strange.
In my example, I have 4 products where 2 are them are Batteries, 1 is a Filter and the last one is a Horn. So as I mentioned earlier, when I render the page, all 4 items will be converted/translated into ion-slide and all the pagination are created correctly as expected.
Here’s 2 scenario I have:
(A) When I don’t change the current slide (meaning I don’t swipe on the ion-slide-box), and I filter out a particular category, the products are rendered properly along with the pagination. So if I select Filters, I will get 1 ion-slide and 1 pagination record which is as expected.
(B) Now, when I do actually change the current slide and filter out a particular category, there will still be 1 ion-slide but 4 pagination record (considering the list had 4 items previously) and a blank white page where the width of the slider-slides wrapper will accommodate for 4 items. I’ve included a screenshot below as well.
Hopefully someone can point me to the right direction to solve this problem.
Thank you!
cc: @mhartington 