CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
BeeZee
BeeZee

Reputation: 1602

How do I highlight ng-repeat items

How do I highlight the newest item added to a list that is displayed with ng-repeat? I've tried using jquery effect() in my addItem() function but that didn't work. I've also tried using the highlight filter from angular-ui without success.

//controller
$scope.addItem = function() {
  $scope.items.unshift($scope.item);
};

//html
<ul class="media-list">
  <li class="media" ng-repeat="item in items | highlight:item">

Upvotes: 2

Views: 3553

Answers (1)

Joseph Silber
Joseph Silber

Reputation: 219900

Angular has been supporting animations since version 1.1.4.

Just add ng-animate to you lis, with an animation name:

<li ng-animate="'highlight'" ng-repeat="item in items">{{ item }}</li>

and supply the proper animation CSS for that animation name:

li {
    -webkit-transition: all 2s 1.5s ease-out;
    -moz-transition: all 1.5s ease-out;
    transition: all 1.5s ease-out;
}

.highlight-enter-setup {
    background: yellow;
}
.highlight-enter-start {
    background: white;
}

Here's the fiddle: http://jsfiddle.net/u4Tnw/

You are not limited to just highlighting. You can do all sorts of crazy animations.

Here's a crazier example: http://jsfiddle.net/u4Tnw/3/

Upvotes: 9

Related Questions