angularjs – ng-class 指令

angularjs 中的ng-class 指令允许用户通过数据绑定表达式来动态设置 HTML 元素上的 CSS 类，该表达式将进一步表示所有要添加的类。仅当ngClass指令中的表达式返回 True 时才添加该类，否则不会添加该类。它受到所有 HTML 元素的支持。

如果已经设置，该指令不会设置任何重复的类。当表达式发生变化时，之前添加的类将被删除，之后才会添加新的类。

语法

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

示例 - ngClass 指令

在您的 Angular 项目目录中创建一个文件“ ngClass.html ”并复制粘贴以下代码片段。

<!DOCTYPE html>
<html>
   <head>
      <title>ngClass Directive</title>

      <script xx_src="https://cdn.staticfile.org/angularjs/1.6.9/angular.min.js">
      </script>

      <style>
         .edit {
            color: green;
            font-size: 1.5em;
         }
      </style>

   </head>
   <body ng-app="" style="text-align: center;">
   <h1 style="color:green">
      Welcome to nhooo.com
   </h1>
   <h2>
      angularjs | ngClass Directive
   </h2>

      <div>
         <input type="button" ng-click="edit=true" value="Style" />
         <input type="button" ng-click="edit=false" value="Reset" />
         <br><br>

         <span ng-class="{true:'edit'}[edit]">
            SIMPLY EASY LEARNING
         </span>
      </div>
   </body>
</html>

输出结果

要运行上述代码，只需转到您的文件并将其作为普通 HTML 文件运行即可。您将在浏览器窗口中看到以下输出。

基础教程