如何添加背景顏色到新添加的行angularjs

Question

我想知道在下面的例子中，我怎樣才能將背景顏色添加到新添加的行。在添加新行時滾動正在下降，但如何通過向行添加背景色來突出顯示。任何幫助都會很棒。這裏是小提琴 - http://jsfiddle.net/cpfx07qq/

html - 
<div ng-app="myApp" ng-controller="MyCtrl"> 
    <button ng-click="add()" scroll-bottom="bottom">Add</button> 
    <ul id="bottom"> 
     <li ng-repeat="item in list">{{item}}</li> 
    </ul> 
</div> 

Answer 1

試試這個：

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <button ng-click="add()" scroll-bottom="bottom">Add</button> 
    <ul id="bottom"> 
     <li ng-repeat="item in list" ng-class="{last: $last && isNew }">{{item}}</li> 
    </ul> 
</div> 

和controller：

function MyCtrl($scope) { 
    $scope.isNew = false; 
    $scope.list = ["item 1", "item 2", "item 3", "item 4", "item 5"]; 
    $scope.add = function() { 
     $scope.isNew = true; 
     $scope.list.push("new item"); 
    } 
} 

在css：

.last { 
    background-color: red; 
} 

Answer 2

var myApp = angular.module('myApp',[]); 
 

 
myApp.directive("scrollBottom", function(){ 
 
    return { 
 
     link: function(scope, element, attr){ 
 
      var $id= $("#" + attr.scrollBottom); 
 
      $(element).on("click", function(){ 
 
       $id.scrollTop($id[0].scrollHeight); 
 
      }); 
 
     } 
 
    } 
 
}); 
 

 
function MyCtrl($scope) { 
 
    $scope.list = ["item 1", "item 2","item 3","item 4","item 5"]; 
 
    $scope.add = function() { 
 
     $scope.list.push("new item"); 
 
    } 
 
}

ul { 
 
    height: 150px; 
 
    overflow-y: auto; 
 
} 
 
li:last-child { 
 
    background-color: red; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script> 
 
<script src="//code.jquery.com/jquery-1.10.0.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <button ng-click="add()" scroll-bottom="bottom">Add</button> 
 
    <ul id="bottom"> 
 
     <li ng-repeat="item in list">{{item}}</li> 
 
    </ul> 
 
</div>