ng-class的几种用法

最新推荐文章于 2021-08-19 11:13:14 发布
最新推荐文章于 2021-08-19 11:13:14 发布
阅读量2.4w 收藏 7
点赞数 2
CC 4.0 BY-SA版权
文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sinat_36146776/article/details/78340922
本文介绍了在 Angular 中使用 ngClass 指令来动态地更改 HTML 元素的 CSS 类的方法。提供了四种不同的实现方式，包括条件判断、变量表达式等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

方法一、

 <div ng-class="{true : 'checker disabled',false : 'checker' }[selectAllButton]"></div>

"checker disabled","checker"是CSS样式,selectAllButton是判断条件，值为"true"or"false" 

 

 

方法二、

<div ng-class="{'checker disabled' : item.disab, 'checker' : !item.disab}"></div>

item.disab是判断条件，值为“true”or“false”

 

方法三、用{{}} 包住的变量表达式

<div ng-class="{{bClass}}"></div>

$scope.bClass = "{'red':true,'green':false}"

 

 

方法四、

<div ng-class="tempClass"></div>
tempClass是CSS样式名称

 

 

angular知识点--ngClass几种用法
奇怪的人类
06-03 3303
ngClass的几种用法ngClass：动态绑定css类。
浅谈AngularJS中ng-class的使用方法
10-21
以上就是关于AngularJS中ng-class使用方法的介绍。ng-class是一个强大的指令，它提供了灵活的方式来控制元素的class，从而影响到CSS样式的应用。通过使用ng-class，开发者可以根据不同的条件动态地改变元素的样式，...
AngularJS ng-class用法
K_wolf的专栏
01-10 1164
ng-class是AngularJS预设的一个指令，用于动态自定义dom元素的css class name，下面是其官网的api doc， AngularJS:ngClassng-class在实际的应用场景中还是比较灵活的，而在AngularJS中一般有三种方式给元素的class属性做一些门道
ng-class的用法
02-07 581
第一种 tar是变量，checked是类名 span ng-class='{checked:tar=="拨打成功"}'>拨打成功span> 第二种 isActive是变量 ng-class="{true: 'detail-record disabled',false: 'detail-record'}[isActive]"
ngclass用法
liweibo348的博客
01-02 3645
1. [ngClass]="{true:'s2',false:'s1'} [ enable == true ]"                            其中s1  s2 为样式   2. [ngClass]="{'hidden':enable}"       hidden为自己写的样式。enable为true或false...
AngularJS中关于ng-class指令的几种实现方式详解
10-21
本文将详细解析三种使用`ng-class`的方法。 **第一种：通过数据的双向绑定** 这种方式是直接将控制器中的变量绑定到`ng-class`中。尽管这种方式在某些情况下可能显得直接且方便，但不被广泛推荐。示例如下： ```...
AngularJS中ng-class用法实例分析
10-19
ng-class的功能可以分为以下几种情况： 1. 直接使用字符串形式绑定：通过绑定一个代表类名的字符串到ng-class上。这种情况下，需要将类名直接写成字符串的形式，如`ng-class="{'class1': true, 'class2': false}"`...
详解AngularJS ng-class样式切换
10-19
首先，我们来看一下代码中使用ng-class指令的基本语法。在HTML代码片段中，我们看到了使用ng-class指令来为元素动态添加CSS类： ```html <div ng-class="{true:'bgstyle-check',false:'bgstyle'}[isFirst]">First `...
ng-class使用
weixin_34168700的博客
01-10 208
2019独角兽企业重金招聘Python工程师标准>>> ...
[ngClass]的简单使用
weixin_45680024的博客
08-19 3417
[ngClass]的简单使用 [ngClass]官方定义：从 HTML 元素上添加和移除 CSS 类。 使用方法： <some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', 'second']">...</some-element> <some-element [ngClass]="{'first': true, 'se
angular1中ng-class的用法
xiaoweilol的博客
03-19 1435
最近的开发中关于ng-class用到的地方也比较多，点击ng-repeat循环出的数组，我们希望其class的样式发生改变，刚开始的时候一点击ng-repeat的数组样式全部改变 后来就想到了  通过后端json数据字段的一个布尔值来改变，这样的话传给后台的数据能够识别该条目是否被选中
【转】ng-class的三种用法
Jiaen188的博客
07-31 2029
原文出处：https://segmentfault.com/a/1190000009139387在开发中我们通常会遇到一种需求：一个元素在不同的状态需要展现不同的样子。而在这所谓的样子当然就是改变其css的属性，而实现能动态的改变其属性值，必然只能是更换其class属性这里有三种方法：第一种：通过数据的双向绑定（不推荐）第二种：通过对象数组第三种：通过key/value下面简单说下这三种：第一种：通
ng-class中的if else判断
热门推荐
程序猿成长之路
02-10 1万+
来自于stackoverflow的一个问题，自己刚好用到，搬过来做个标记。原问题链接 在使用ng-class时，有些时候会碰到根据是否满足条件来设置元素的样式，使用以下方法可以达到这样的目的。 （1）使用运算符 这样写无需在javascript中添加额外代码，但是需要注意的是要让代码具有良好的可读性。 （2）使用额外的方法 然后使用以下的代码：  $scope.setS
ng指令之 ng-class 篇
LHL62411570的专栏
07-06 310
ng指令之 ng-class 篇 1》定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。ng-class 指令的值可以是字符串，对象，或一个数组。 如果是字符串，多个类名使用空格分隔。 如果是对象，需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有...
ng-class
fenglin836的博客
07-19 519
&lt;li ng-class="{{order.paymentType=='1'?'selected':''}}" ng-click="selectPayType('1')"&gt;&lt;/li&gt; 这样需要点击两次才可以显示选中，实用angularJS的属性，ng-class代替class可以解决这个问题...
ng-form-element一直无法引入
05-29
如果你在使用 ng-form-element 时出现了无法引入的问题，可以尝试以下几种解决方法： 1. 确认 npm 包已经正确安装 在使用 ng-form-element 之前，需要先通过 npm 安装相应的包。可以通过以下命令来安装： ```bash npm install ng-form-element ``` 安装完成后，可以在项目的 `node_modules` 目录下找到 `ng-form-element` 相关的文件。 2. 确认 Angular 版本是否兼容 ng-form-element 的不同版本可能与不同版本的 Angular 不兼容，需要根据官方文档中的说明选择对应的版本。可以通过以下命令来安装与 Angular 兼容的版本： ```bash npm install ng-form-element@<version> ``` 其中，`<version>` 表示需要安装的 ng-form-element 版本号，可以根据官方文档中的说明进行选择。 3. 确认是否正确引入模块 在使用 ng-form-element 时，需要在需要使用的模块中引入相应的模块。可以在 `app.module.ts` 或其他需要使用 ng-form-element 的模块中添加以下代码： ```typescript import { NgFormElementModule } from 'ng-form-element'; @NgModule({ imports: [ NgFormElementModule, ... ], ... }) export class AppModule { } ``` 其中，`NgFormElementModule` 是需要引入的模块。 4. 确认是否正确使用组件 如果以上步骤都没有解决问题，可以检查是否正确使用了 ng-form-element 中的组件。在使用组件时，需要在模板中添加相应的标签，并传入必要的参数。 以上是一些可能导致 ng-form-element 无法引入的原因和解决方法，可以根据实际情况进行尝试。如果问题仍无法解决，请提供更多的信息，以便更好地定位问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值