AngularJS使用ng-class动态增减class样式的方法示例

本文实例讲述了AngularJS使用ng-class动态增减class样式的方法。分享给大家供大家参考，具体如下：

使用ng-class可以实现动态地增减样式：

<!DOCTYPE html>
<html ng-app="formExample">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../js/angular.js"></script>
  <script>
    angular.module('formExample', [])
        .controller('FormController', ['$scope', function($scope)
        {
        }]);
  </script>
  <style>
    .strike {
      text-decoration: line-through;
    }
    .bold {
      font-weight: bold;
    }
    .red {
      color: red;
    }
  </style>
</head>
<body>
<div>
  <p ng-class="{strike: deleted, bold: important, red: error}">通过映射的方式</p>
  <input type="checkbox" ng-model="deleted">添加strike样式<br>
  <input type="checkbox" ng-model="important">添加bold样式<br>
  <input type="checkbox" ng-model="error">添加错误样式
  <hr>
  <p ng-class="style">使用字符串的方式</p>
  <input type="text" ng-model="style" placeholder="输入 bold、 strike 或 red">
  <hr>
  <p ng-class="[style1, style2, style3]">使用数组的方式</p>
  <input ng-model="style1" placeholder="输入: bold, strike 或 red"><br>
  <input ng-model="style2" placeholder="输入: bold, strike 或 red"><br>
  <input ng-model="style3" placeholder="输入: bold, strike 或 red"><br>
  <hr/>
</div>
</body>
</html>

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

# AngularJS # ng-class # 动态 # 增减 # class样式 # 详解AngularJS ng-class样式切换 # AngularJS表格样式简单设置方法示例 # AngularJs定制样式插入到ueditor中的问题小结 # Angular 4中如何显示内容的CSS样式示例代码 # Angular5给组件本身的标签添加样式class的方法 # Angular使用动态加载组件方法实现Dialog的示例 # angularJS实现动态添加 # 删除div方法 # AngularJS动态添加数据并删除的实例 # AngularJS实现动态切换样式的方法分析 # 进阶 # 相关内容 # 感兴趣 # 给大家 # 可以实现 # 更多关于 # 所述 # 程序设计 # 操作技巧 # 讲述了 # head # meta # charset # gt # app # formExample # UTF # angular # module # controller

返回目录在线咨询

上一篇：有了域名和空间，怎样测试网站的功能是否正常运行？
下一篇：在Go语言中根据运行时条件动态控制JSON字段输出的教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

AngularJS使用ng-class动态增减class样式的方法示例

您的项目需求