脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS ng-class 指令

AngularJS入门教程之ng-class 指令用法

 更新时间：2016年08月01日 09:13:40   投稿：lqh  
本文主要介绍AngularJS ng-class 指令,这里帮大家整理了ng-class资料和示例代码,学习AngularJS指令的同学可以参考下

AngularJS ng-class 指令

AngularJS 实例

修改 <div> 元素的类:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
 color:white;
 background-color:lightblue;
 padding:20px;
 font-family:"Courier New";
}
.tomato {
 background-color:coral;
 padding:40px;
 font-family:Verdana;
}
</style>
</head>
<body ng-app="">

<p>选择一个类:</p>

<select ng-model="home">
<option value="sky">天空色</option>
<option value="tomato">番茄色</option>
</select>

<div ng-class="home">
 <h1>Welcome Home!</h1>
 <p>I like it!</p>
</div>

</body>
</html>

定义和用法

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

语法

<element ng-class="expression"></element>

所有的 HTML 元素都支持。

参数值

值 描述
expression 表达式返回一个或多个类名。

以上就是对AngularJS ng-class 指令资料的整理，有需要的朋友参考下。

您可能感兴趣的文章:

相关文章

  • Angular2开发环境搭建教程之VS Code

    Angular2开发环境搭建教程之VS Code

    不久前WebStorm的频繁卡死终于让我受不鸟了,我决定换个轻量级的编辑器，尝试了Emacs、Sublime text,最后选择了vscode。下面这篇文章主要给大家介绍了关于Angular2开发环境搭建教程之VS Code的相关资料，需要的朋友可以参考下。
    2017-12-12
  • 详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

    详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

    本篇文章主要介绍了详解AngularJS1.6版本中ui-router路由中/#!/的解决方法，非常具有实用价值，需要的朋友可以参考下
    2017-05-05
  • Angular实现svg和png图片下载实现

    Angular实现svg和png图片下载实现

    这篇文章主要介绍了Angular实现svg和png图片下载实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Angular应用打包和部署实现过程详解

    Angular应用打包和部署实现过程详解

    这篇文章主要为大家介绍了Angular应用打包和部署实现过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • AngularJS ng-repeat指令及Ajax的应用实例分析

    AngularJS ng-repeat指令及Ajax的应用实例分析

    这篇文章主要介绍了AngularJS ng-repeat指令及Ajax的应用,结合实例形式分析了ng-repeat指令的功能及ajax请求交互相关操作技巧,需要的朋友可以参考下
    2017-07-07
  • AngularJS基础教程之简单介绍

    AngularJS基础教程之简单介绍

    本教程旨在帮助你尽可能快速而有效地学习AngularJS。通过该教程你会学习到AngularJS的一些基本特性，例如指令、表达式、过滤器、模块和控制器等。以及其它所有你需要知道的有关AngularJS的东西，如事件、DOM节点、表单、用户输入、数据验证、Http对象等。
    2015-09-09
  • AngularJs自定义服务之实现签名和加密

    AngularJs自定义服务之实现签名和加密

    AngularJS 是一个 JavaScript 框架，它可以通过 <script> 标签添加到 HTML 页面。这篇文章主要介绍了AngularJs自定义服务之实现签名和加密的相关资料,需要的朋友可以参考下
    2016-08-08
  • AngularJS 实现JavaScript 动画效果详解

    AngularJS 实现JavaScript 动画效果详解

    本文主要介绍AngularJS 实现 JavaScript 动画的资料，这里整理了详细的资料和简单示例代码，有兴趣的小伙伴可以参考下
    2016-09-09
  • 将angular.js项目整合到.net mvc中的方法详解

    将angular.js项目整合到.net mvc中的方法详解

    这篇文章主要给大家介绍了将angular.js项目整合到.net mvc中的相关资料，文中通过示例代码将实现的过程介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。
    2017-06-06
  • angularjs循环对象属性实现动态列的思路详解

    angularjs循环对象属性实现动态列的思路详解

    这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-11-11

最新评论