【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 2018-07-30 10:17  smile轉角  阅读(211)  评论(0)  编辑  收藏  举报

导航