CODEWITHSUNDEEP
javascriptangularjs
user5621153
user5621153

Reputation:

Angular js animate on $scope variable update on <p> tag

$interval(function() {
        var count = $scope.announcements.length;
        for(var i=0;i<count;i++) {
            if($scope.announcement == $scope.announcements[i].description) {
                if(i==count-1) {
                    $scope.announcement  = $scope.announcements[0].description;
                    if($scope.announcement.length >= 100) {
                        $scope.readmore     = true;
                        $scope.short_ann    = $scope.announcement.substr(0,85);
                    }
                    break;
                } else {
                    $scope.announcement  = $scope.announcements[i+1].description;
                    if($scope.announcement.length >= 100) {
                        $scope.readmore     = true;
                        $scope.short_ann    = $scope.announcement.substr(0,85);
                    }
                    break;
                }
            }
        } 
    }, 5000);

The $scope.announcement is updated at every 5 seconds and i want a small animation while changing the ng-bind of this

Upvotes: 1

Views: 78

Answers (2)

tasseKATT
tasseKATT

Reputation: 38490

Create a directive that watches for value changes on a property and performs the animation.

For example:

app.directive('flash', ['$animate',
  function($animate) {
    return {
      link: function(scope, element, attrs) {

        scope.$watch(attrs.flash, function(newValue, oldValue) {

          if (newValue === oldValue) return;

          $animate.addClass(element, 'flash').then(function() {
            element.removeClass('flash');
          });
        });
      }
    };
  }
]);

Usage:

<p flash="announcement" class="animated">{{announcement}}</p>

If you know you will use ng-bind instead an alternative usage is:

<p flash ng-bind="announcement" class="animated"></p>

With this second version you need to watch attrs.ngBind instead of attrs.flash:

scope.$watch(attrs.ngBind, ...

Note that this example uses ngAnimate and animate.css to perform the animation.

Demo: http://plnkr.co/edit/R0dWpE0VSscqE4mJ6462?p=preview

Upvotes: 1

Alex Vasilev
Alex Vasilev

Reputation: 49

use ng-model to your p tag to show actual data, and ngAnimate or smth else...

<p ng-model="announcement">{{announcement}}</p>

https://docs.angularjs.org/guide/animations

https://docs.angularjs.org/api/ngAnimate

Upvotes: 0

Related Questions