Ion-Slide-Box + Filtering


#1

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


#2

Sorry for bumping but still really need some help on this.


#3

Hi,
did you end up finding a solution to this? As it fits a situation similar to my own. Kind regards


#4

Hi Lync,

I actually did find a solution to this just taht I haven’t checked back the forums in awhile haha

I just added a timeout to trigger
$ionicSlideBoxDelegate.$getByHandle('products').update();

and it will work.

I guess it had something to do with the delay when the scope was being updated


#5

Excellent. Thank you for responding.