【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

转载于:https://www.cnblogs.com/websmile/p/9389157.html


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部