Angular—ng-class
2016-08-21 19:26
197 查看
ng-class用来设置DOM元素的样式，用在html页面中，喜欢的一个例子，希望后面补充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.sky{
color: white;
background-color: lightblue;
padding:20px;
font-family: "courier new";
}
.tomato{
background-color: coral;
padding: 40px;
font-family: verdana;
}
</style>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
<p>选择一个类：</p>
<select ng-model="home">
<option value="sky" selected="selected">天空色</option>
<option value="tomato">番茄色</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.sky{
color: white;
background-color: lightblue;
padding:20px;
font-family: "courier new";
}
.tomato{
background-color: coral;
padding: 40px;
font-family: verdana;
}
</style>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
<p>选择一个类：</p>
<select ng-model="home">
<option value="sky" selected="selected">天空色</option>
<option value="tomato">番茄色</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it</p>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Angular Setting Class In Ng-Repeat
- angular2指令解读:ngFor,ngIf,ngSwitch,ngStyle,ngClass用法
- Angular.js Use a preliminary introduction ng-class
- angularjs ng-class学习笔记
- AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle
- angular 的ng-class
- angularjs ng-class 两种用法
- [Angular 2] ng-class and Encapsulated Component Styles
- Angular -- ng-class
- ngclass expressions in angularjs
- AngularJS ng-class用法
- AngularJS ng-class用法
- angularjs ul li radio span ng-class ng-checked demo
- angular中如何使用ng-class实现当前元素的变色
- angular2 [ngStyle] [ngClass]的用法
- angular在通过ng-class来改变样式
- angular指令ng-class巧用
- ngclass in angular
- Angular ng-class详解及实例代码
- AngularJs ng-class 使用