首先我们来看class方案实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<style>
.red{
color: red;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myController">
<div class="input-group">
<input ng-model="task" type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="add()">提交</button>
</span>
</div>
<h4 ng-if="tasks.length>0">任务列表</h4>
<ul class="list-group">
<li ng-repeat="item in tasks track by $index"
ng-class="{red:$last}"
>
{{item}}
<a ng-click="tasks.splice($index,1)">删除</a>
</li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.task ="";
$scope.tasks =['1','2','3'];
$scope.add=function(){
$scope.tasks.push($scope.task);
}
$scope.lastItem = false
// 实现最后一条数据显示为红色
$scope.$on('$viewContentLoaded', function() {
var lastItem = angular.element('li:last-child');
if (lastItem.length > 0) {
$scope.lastItem = true;
lastItem.addClass('red');
}
});
});
</script>
</body>
</html>然后我们来看看style方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<div class="input-group">
<input ng-model="task" type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="add()">提交</button>
</span>
</div>
<h4 ng-if="tasks.length>0">任务列表</h4>
<ul class="list-group">
<li ng-repeat="item in tasks track by $index"
ng-style="colorObj[$index]"
>
{{item}}
<a ng-click="tasks.splice($index,1); getColor();">删除</a>
</li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.task ="";
$scope.tasks =['1','2','3'];
$scope.add=function(){
$scope.tasks.push($scope.task);
$scope.getColor();
}
$scope.colorObj = [];
// 实现最后一条数据显示为红色
$scope.getColor = function(){
for(var i = 0;i<$scope.tasks.length;i++){
$scope.colorObj[i] = {'color':'black'}
if($scope.tasks.length==i+1){
$scope.colorObj[i] = {'color':'red'}
}
}
}
$scope.getColor();
});
</script>
</body>
</html>最后我们都能得到下面的效果
