Angularjs
发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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($scop
E) 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="@R_
674_10943@k@L_
607_1@" ng-model="
deleted">
添加Strike样式<br> 31. <input type="@R_
674_10943@k@L_
607_1@" ng-model="important">
添加bold样式<br> 32. <input type="@R_
674_10943@k@L_
607_1@" 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>
大佬总结
以上是大佬教程为你收集整理的AngularJs动态增减class样式——ng-class全部内容，希望文章能够帮你解决AngularJs动态增减class样式——ng-class所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
