AngularJS中ng-class的用法

张金宝发布于2019-08-22 11:00 / 3501人阅读

摘要：从今天开始写博，记录下自己技术发展的点滴吧。相比另外两种，类型的表达式就有优势。缺点是多了，写起来挺麻烦的第三种，表达式为这里中的每个元素都绑定了一个的输入值，实际上每个元素都使用了类型的值中元素可以为或者，中对的规则同上。

从今天开始写博，记录下自己技术发展的点滴吧。

一、什么是ng-class

ng-class是AngularJS预设的一个指令(directive)，通过这个指令能够对html元素的类(class)进行动态地设置。

二、在什么场景下用ng-class

在需要动态修改html元素的时候...所以其实这个问题等价于什么时候需要动态修改html元素的类？
在个人浅薄的编程经验中......需要动态修改html元素的类的时候基本是需要改变html元素的“表现”的时候。
举个栗子，在css中设置

.hidden{
    display:none;
}

那么需要隐藏一个元素的时候，对元素添加hidden类即可
再举个栗子，一个关闭按钮，有两种状态，可用与不可用，那么你可以在css中设置

/* 正常的关闭按钮 */
.btn-close{
    background-image:url(images/btn-close.png)
}
/* 不可用的关闭按钮 */
.btn-close-disabled{
    background-image:url(images/btn-close-disabled.png)
}

这样通过动态设置 btn-close 和 btn-close-disabled 两个类，你就可以方便地修改按钮的外观了，是不是很神奇，很牛X......扯远了, 估计大神们已经在"呵呵"...回到正题

三、怎么用ng-class

其实AngularJS官方给的API给出的例子很详细，请戳这里
可以先看下Example中的style.css，定义了五种class

/* 对文本添加删除线 */
.strike {
    text-decoration: line-through;
}
/* 加粗文本 */
.bold {
    font-weight: bold;
}
/* 文本字体设置为红色 */
.red {
    color: red;
}
/* 错误文本的样式。红色字体，黄色背景 */
.has-error {
    color: red;
    background-color: yellow;
}
/* 文本字体设置为橘色 */
.orange {
    color: orange;
}

ng-class的用法就是在html元素中设置ng-class="expression"，这个expression(表达式)可以为string，object，array三种类型
Example中index.html中展示了ng-class的三种用法，分别来看一下

第一种，表达式为object


Map Syntax Example


  deleted (apply "strike" class)




  important (apply "bold" class)




  error (apply "has-error" class)

对象中的key-value对，key表示的是class的名称，value表示的是该html元素是否有这个 calss，如果value为true，那么html元素就属于这个class，如果value为false，那么html元素就不属于这个class。具体的html外观表现就不截图了，大家可以自己试验。
在元素的class比较多的时候。相比另外两种，object类型的表达式就有优势。因为拼字符串是很烦的~

第二种，表达式为string

Using String Syntax

例子中将ng-class 绑定到了input的输入值上。实际上可以通过修改$scope.style的值设置ng-class。
这种方式的优点就是简单、粗暴。缺点是class多了，写起来挺麻烦的

第三种，表达式为array

Using Array Syntax

这里array中的每个元素都绑定了一个input的输入值，实际上每个元素都使用了string类型的值

Using Array and Map Syntax




   warning (apply "orange" class)

array中元素可以为string 或者object，object中key-value对的规则同上。array类型还是很强大的。。。

发现写博客还是蛮累人的，竟然写了一个小时....sign...

云服务器 GPU云服务器 java中枚举的用法 python中for的用法 python中input的用法 php中css的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91612.html

【转】ng-class的用法

摘要：但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说基本也是满足所需了，我一般都用这个。简单直观对于第二种方式我曾经有疑惑这到底是什么用法这并非的用法，而是的技巧。原文出处：https://segmentfault.com/a/11... 在开发中我们通常会遇到一种需求：一个元素在不同的状态需要展现不同的样子。而在这所谓的样子当然就是改变其css的属性，而实现能动态的改变其属性...

chenatu 2019-08-01 17:18 评论0 收藏0
【转】ng-class的用法

摘要：但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说基本也是满足所需了，我一般都用这个。简单直观对于第二种方式我曾经有疑惑这到底是什么用法这并非的用法，而是的技巧。原文出处：https://segmentfault.com/a/11... 在开发中我们通常会遇到一种需求：一个元素在不同的状态需要展现不同的样子。而在这所谓的样子当然就是改变其css的属性，而实现能动态的改变其属性...

Render 2019-08-20 18:25 评论0 收藏0
【转】ng-class的用法

摘要：但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说基本也是满足所需了，我一般都用这个。简单直观对于第二种方式我曾经有疑惑这到底是什么用法这并非的用法，而是的技巧。原文出处：https://segmentfault.com/a/11... 在开发中我们通常会遇到一种需求：一个元素在不同的状态需要展现不同的样子。而在这所谓的样子当然就是改变其css的属性，而实现能动态的改变其属性...

beita 2019-08-29 13:02 评论0 收藏0
angularjs初识

摘要：总的来说，收获很大。这里这里就以一些常用的标签谈谈中的基础知识。然后还有一个表示记录的索引号，从开始。已经用这个数组的值替他们分好了组了，是不是感觉很强大，还有很多强大的地方等着我们去学习，掌握它，还有更强大的等着我们。周三的时候跟着老师简单的入门了angularjs，然后去图书馆找了一本《Angularjs实战》来看了看，虽然这本书网上的评价不太高，但对于初学者的我来说还是不错的，...

tanglijun 2019-08-23 11:49 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0