如何突出显示重复项目

Question

如何突出显示添加到使用ng-repeat显示的列表中的最新项目？我尝试effect()在我的addItem()函数中使用jquery 但是没有用.我也试过使用angular-ui的高亮滤镜而没有成功.

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

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

Answer 1

自1.1.4版以来,Angular一直支持动画.

只需添加ng-animate到您li年代,随着动画的名称:

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

并为该动画名称提供适当的动画CSS:

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;
}

这是小提琴:http://jsfiddle.net/u4Tnw/

您不仅限于突出显示.你可以做各种疯狂的动画.

这是一个更疯狂的例子:http://jsfiddle.net/u4Tnw/3/