ng filter doesn't work with animations
Opened this issue · 3 comments
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>
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.
No able to get animations while using ng-repeat getting class name is undefined error. Help would be grateful.
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.