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>