前端之家收集整理的这篇文章主要介绍了
AngularJs动态增减class样式——ng-class，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
使用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="check
Box" ng-model="deleted">
添加strike样式<br> 31. <input type="check
Box" ng-model="important">
添加bold样式<br> 32. <input type="check
Box" 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>
