ng filter doesn't work with animations

[xueenda]

When I try to filter the list, the whole list is gone. Without animation everything works fine.

Here is the code I have:

<label class="item item-input">
    <input type="text" placeholder="City" ng-model="searchCity">
  </label>
<ion-list class="animate-blinds">
    <ion-item ng-repeat="x in items | filter:searchCity"  ui-sref="app.details({ loc: loc, id: x.id })">
        <h2>{{ x.title }}</h2>
        <p>{{ x.content }}</p>
    </ion-item>
</ion-list>

[guilhermedecampo]

Hi @xueenda an easy way to fix that is create a directive animation for example and bind an event on keyup (maybe add a debounce here) that triggers the effects you wish. In this case blinds.

$timeout(function() {
    ionic.material.motion.blinds();
  }, 300);

Hope it works well for you.

[KusumaScriptbees]

No able to get animations while using ng-repeat getting class name is undefined error. Help would be grateful.

[kashban]

You get the error because the DOM is not ready when calling ripple() and displayEffect(). ngRepeat takes a while to add all items to the DOM, so you'll have to call those functions after the last element of the list has been rendered.

I use this directive

.directive('ngLastRepeat', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngLastRepeat'+ (attr.ngLastRepeat ? '.'+attr.ngLastRepeat : ''));
                });
            }
        }
    };
})

like this:

<div ng-repeat="..." ng-last-repeat="mylist">

Javascript:

// Animate list on this event
    $scope.$on('ngLastRepeat.mylist',function(e) {
        $timeout(function(){
            ionicMaterialMotion.fadeSlideInRight();
            ionicMaterialInk.displayEffect();
          },0); // No timeout delay necessary.
    });

Unfortunately I can't remember where I got this from (was on StackOverflow), but there are plenty of other posts showing directives to run something after the last element of ngRepeat has been rendered.