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

发布时间：2020-12-17 10:04:35 所属栏目：安全来源：网络整理

导读：使用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',

使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!