angularJS学习之路（十六）---ng-class

wust小吴

于 2015-11-23 16:59:49 发布

阅读量675

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/u014737138/article/details/49997903

版权

angularjs 专栏收录该内容

31 篇文章

订阅专栏

作用：动态设置元素的类

<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../css/ng-class1.css" />
		<title></title>
	</head>

	<body>

		<div ng-controller="LotteryController">
			<div ng-class="{red: x > 5}" ng-if="x > 5">
				You won!
			</div>
			<button ng-click="x = generateNumber()" ng-init="x = 0">Draw Number</button>
			<p>Number is: {{ x }}</p>
		</div>

		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script>
			var app = angular.module('myApp', []);
			app.controller('LotteryController', function($scope) {
				$scope.generateNumber = function() {
					return Math.floor((Math.random() * 10) + 1);
				};
			});
		</script>
	</body>

</html>

css文件：

.red {
background-color: red;
}