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>

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

2 个答案: