angular26-ng-classt隔行变色

     <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ng-app指令</title>
        <style>
            .red {
                color: red;
            }
            
            .green {
                color: green;
            }
        </style>
    </head>
    <!-- 需要angular的代码必须包裹在ng-app的代码中 -->
    <!-- ng-bind遇到html的时候会转义 为了安全 -->
     
    <body ng-app="myApp1">
        <ul ng-controller="ListController">
            <!-- class="{{$even?'red':'green'}}" -->
            <!-- ng-class会根据当前的值决定是否谈价特定类名 -->
            <li ng-repeat="item in data" ng-class="{red:$even,green:$odd}" data-id="{{item.id}}"><strong>{{item.name}}</strong><span>{{item.age}}</span>></li>
        </ul>
        <script src="./js/Angular.js"></script>
        <!-- 隔行换色 -->
        <script>
            var myApp1 = angular.module('myApp1', []);
            myApp1.controller('ListController', ['$scope', function($scope) {
                $scope.data = [];
                for (var i = 0; i < 10; i++) {
                    $scope.data[$scope.data.length] = {
                        id: i,
                        name: 'geyao' + i,
                        age: 20 + i,
                    }
                }
            }])
        </script>
    </body>
     
    </html>

运行结果

posted @ 2022-07-13 18:29 前端导师歌谣阅读(56) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· angular28-ng-class颜色切换

· angular27-ng-class颜色切换

· 前端学习（2283）：react之隔行变色

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

angular26-ng-classt隔行变色

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ng-app指令</title>
	<style>
	.red {
	color: red;
	}

	.green {
	color: green;
	}
	</style>
	</head>
	<!-- 需要angular的代码必须包裹在ng-app的代码中 -->
	<!-- ng-bind遇到html的时候会转义为了安全 -->

	<body ng-app="myApp1">
	<ul ng-controller="ListController">
	<!-- class="{{$even?'red':'green'}}" -->
	<!-- ng-class会根据当前的值决定是否谈价特定类名 -->
	<li ng-repeat="item in data" ng-class="{red:$even,green:$odd}" data-id="{{item.id}}"><strong>{{item.name}}</strong><span>{{item.age}}</span>></li>
	</ul>
	<script src="./js/Angular.js"></script>
	<!-- 隔行换色 -->
	<script>
	var myApp1 = angular.module('myApp1', []);
	myApp1.controller('ListController', ['$scope', function($scope) {
	$scope.data = [];
	for (var i = 0; i < 10; i++) {
	$scope.data[$scope.data.length] = {
	id: i,
	name: 'geyao' + i,
	age: 20 + i,
	}
	}
	}])
	</script>
	</body>

	</html>

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

angular26-ng-classt隔行变色

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识