zoukankan      html  css  js  c++  java
  • 【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

  • 相关阅读:
    Scala-文件操作
    python-数字
    python-访问模型
    scala-包
    Scala对象
    Scala-类
    sql存储过程
    sql视图
    sql基本语句
    sql中级语句
  • 原文地址:https://www.cnblogs.com/websmile/p/9389157.html
Copyright © 2011-2022 走看看