首页 > 代码库 > directive ngClassEven & ngClassOdd

directive ngClassEven & ngClassOdd

2024-10-05 13:58:39   216人阅读

　　ngClassOdd和ngclassEven指令与ngClass完全相同，除了它们与ngRepeat结合在一起工作，并且只对奇数(偶数)行生效。

　　这个指令只能在一个ngRepeat的范围内应用。

例子：

index.html

<!DOCTYPE html>
<html ng-app="bindExample">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .odd {
            color: red;
        }
        .even {
            color: blue;
        }
    </style>
</head>
<body ng-controller="ExampleController">
<div>
    <ol ng-init="names=[‘John‘, ‘Mary‘, ‘Cate‘, ‘Suz‘]">
        <li ng-repeat="name in names">
           <span ng-class-odd="‘odd‘" ng-class-even="‘even‘"><!--要用‘‘包括css类名-->
             {{name}} &nbsp; &nbsp; &nbsp;
           </span>
        </li>
    </ol>
</div><hr>
<script src="framework/angular.js"></script>
<script src="js/bbb.js"></script>
</body>
</html>

script.js

angular.module(‘bindExample‘, [])
    .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
        $scope.names = [];
    }]);

 

directive ngClassEven & ngClassOdd


联系
我们