AngularJS ng-class 指令

定义和用法

ng-class 指令将一个或多个 CSS 类动态绑定到 HTML 元素。

ng-class 指令的值可以是字符串，对象或数组。

如果是字符串，则应包含一个或多个以空格分隔的类名。

作为一个对象，它应该包含键值对，其中键是要添加的类的类名，而值是布尔值。仅当该值设置为 true 时，才添加该类。

作为数组，它可以是两者的组合。每个数组元素可以是字符串，也可以是对象，如上所述。

语法

<element ng-class="expression"></element>

所有HTML元素都支持。

参数

参数	必需的	描述
expression	是	该表达式返回一个或多个类名。

示例

下例演示了选中选择框的值来更改<div>元素的类：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到菜鸟教程</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<style>
    .china {
        color:white;
        background-color:lightblue;
        padding:20px;
        font-family:"Courier New";
    }
    .beijing {
        background-color:coral;
        padding:40px;
        font-family:Verdana;
    }
</style>
</head>
<body ng-app="">
    <p>点击选择框选择一个值来改变div元素的类</p>

    <select ng-model="home">
       <option value="china">中国</option>
       <option value="beijing">北京</option>
    </select>

    <div ng-class="home">
      <h1>北京欢迎您!</h1>
      <p>我喜欢中国!</p>
    </div>

</body>
</html>

尝试一下

AngularJS ng-class 指令

定义和用法

语法

参数

示例

相关页面