AngularJs动态增减class样式——ng-class

最新推荐文章于 2023-04-28 14:19:43 发布

原创最新推荐文章于 2023-04-28 14:19:43 发布 · 883 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

js/jquery/jqueryUi/jqueryEaseyUI/extjs/angulrJs/react/es6/grunt/zepto/raphael 专栏收录该内容

81 篇文章

订阅专栏

本文介绍如何在Angular中利用ng-class指令实现元素样式的动态切换。通过三种方式——映射对象、字符串拼接及数组形式，展示了如何根据条件动态地为DOM元素添加或移除CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用ng-class可以实现动态地增减样式：
[html] view plain copy
01.<!DOCTYPE html>
02.<html ng-app="formExample">
03.<head>
04. <meta charset="UTF-8">
05. <title></title>
06. <script src="../js/angular.js"></script>
07. <script>
08. angular.module('formExample', [])
09. .controller('FormController', ['$scope', function($scope)
10. {
11. }]);
12. </script>
13.
14. <style>
15. .strike {
16. text-decoration: line-through;
17. }
18. .bold {
19. font-weight: bold;
20. }
21. .red {
22. color: red;
23. }
24. </style>
25.</head>
26.<body>
27.
28.<div>
29. <p ng-class="{strike: deleted, bold: important, red: error}">通过映射的方式</p>
30. <input type="checkbox" ng-model="deleted">添加strike样式<br>
31. <input type="checkbox" ng-model="important">添加bold样式<br>
32. <input type="checkbox" ng-model="error">添加错误样式
33. <hr>
34.
35. <p ng-class="style">使用字符串的方式</p>
36. <input type="text" ng-model="style" placeholder="输入 bold、 strike 或 red">
37. <hr>
38.
39. <p ng-class="[style1, style2, style3]">使用数组的方式</p>
40. <input ng-model="style1" placeholder="输入: bold, strike 或 red"><br>
41. <input ng-model="style2" placeholder="输入: bold, strike 或 red"><br>
42. <input ng-model="style3" placeholder="输入: bold, strike 或 red"><br>
43. <hr/>
44.
45.</div>
46.</body>
47.</html>