directive ngClassEven & ngClassOdd

  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 = [];
    }]);

 

posted @ 2017-06-13 14:02  发福大叔  阅读(160)  评论(0编辑  收藏  举报