Angular实现用ng-class和ng-style控制数组最后一个数据为红色

最新推荐文章于 2024-10-09 11:19:11 发布

万能守恒定律

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量223

点赞数 4

分类专栏： angular 文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/qq_50951790/article/details/131127873

版权

angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这两段代码展示了如何在AngularJS应用中使用class和style方案来实现任务列表功能，当添加新任务时，最后一项自动变为红色。通过ng-repeat指令遍历任务列表，结合ng-class或ng-style设置动态样式。删除任务时，列表会更新，保持最后一项红色。

摘要由CSDN通过智能技术生成

首先我们来看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>

最后我们都能得到下面的效果