【angularjs】使用angular搭建项目，实现隔行换色

描叙：使用ng-class实现每隔3行换色

代码：

复制代码
<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        ul{
            list-style: none;
        }
        li{
            height:24px;
            line-height: 24px;
            background:red;
        }
        .special-color{
            background:#fff;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('CourseCtrl', function ($scope, $http) {
            $scope.items = [0,1,2,3,4,5,6,7,8,9,10];
            $scope.changeColor = function(index){
                var bFlag = null;
                (parseInt(index/3))%2 == 0 ? bFlag =true : bFlag = false;
                return bFlag;
            }
        });
    </script>
</head>

<body ng-controller="CourseCtrl">
    <ul  class="container ">
        <li ng-repeat="item in items" ng-class="{'special-color':changeColor($index)}">{{item}}</li>
    </ul>
</body>

</html>
复制代码

 

作者：smile.轉角

QQ：493177502

posted on   smile轉角  阅读(212)  评论(0)  编辑  收藏  举报

编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

导航

统计

点击右上角即可分享
微信分享提示