关于angular的ng-class条件判断

最新推荐文章于 2024-01-06 01:23:02 发布
最新推荐文章于 2024-01-06 01:23:02 发布
阅读量663 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/momodaolai/p/5741639.html
本文介绍了Angular中ng-class指令的正确使用方法，特别是如何在repeat中进行多条件判断来设置元素的class属性。文章通过对比错误与正确的代码示例，详细解释了在引用变量时需要注意的问题。

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

angular的ng-class的多条件判断是非常好用的，不需要写过多的判断去更改他相应的class，

但大家要记住，在repeat中使用ng-class多条件判断时，


错误写法：<i class="icon2 icon-warp-box dataSourcesSet" ng-class="{false: {{tab.disableClass}},true:{{tab.ngClass}}}[dataManIsActive(tab.url)]" >
</i>


正确写法：<i class="icon2 icon-warp-box dataSourcesSet" ng-class="{false: '{{tab.disableClass}}',true:'{{tab.ngClass}}'}[dataManIsActive(tab.url)]" ></i>


引用tab.disableClass时需要给他加上引用符号，'{{tab.disableClass}}';否则不能执行成功；


转载于:https://www.cnblogs.com/momodaolai/p/5741639.html

                

        




    

    
  



    



                



	

		

			

				
					
Angular中的ng-template与性能优化

				
			

			

				

					2501_90323865的博客
				

				

					03-25
					
					172
					
				

			

		

		

			
				
通过合理使用Angular的和优化变更检测策略，我们可以有效地提升应用的性能。记住，性能优化是一个持续的过程，开发者需要根据具体的应用场景进行适当的调整和优化。

			
		

	



                

            
              



	

		

			

				
					
angular知识点--ngClass几种用法

				
			

			

				

					奇怪的人类
				

				

					06-03
					
					3303
					
				

			

		

		

			
				
ngClass的几种用法ngClass：动态绑定css类。

			
		

	



              


  
              

                


	

		

			

				
					
angular中的ng-class多条件判断的用法

				
			

			

				

					xwnxwn的专栏
				

				

					08-25
					
					3110
					
				

			

		

		

			
				
转载： https://blog.youkuaiyun.com/m0_37885651/article/details/79819628


&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;title&gt;&lt;/title&gt;
      

			
		

	





	

		

			

				
					
具有NgClass和NgStyle的Angular 2+类

				
			

			

				

					culiu9261的博客
				

				

					07-22
					
					372
					
				

			

		

		

			
				
In this blog post, we'll be learning about NgClass and NgStyle in Angular v2.x. Throughout this blog post, Angular means Angular version greater than 2.x unless stated otherwise. 
 在此博客文章中，我们将学习Angula...

			
		

	



		

			
		



	

		

			

				
					
【angular基础】ng-class的几种用法

					
热门推荐

				
			

			

				

					康一夏忙中偷闲的日子
				

				

					06-15
					
					1万+
					
				

			

		

		

			
				
文章目录单个变量多个变量动态添加类名ng-repeat里的ng-class与ng-class-odd
单个变量
$scope.className = 'active';

<--变量-->
<div ng-class="className">商品标题</div>

<--字符串-->
<div class="active">商品标题&lt...

			
		

	





	

		

			

				
					
Angular ng-class详解及实例代码

				
			

			

				

					09-01
				

			

		

		

			
				
2. **对象键/值形式**：用于处理更复杂的类混合，可以有多个条件判断，每个键对应一个布尔表达式，如果表达式为`true`，对应的值（即类名）就会被添加到元素上。例如：  ```javascript  function Ctr($scope) {  $...

			
		

	





	

		

			

				
					
angularJs的ng-class切换class

				
			

			

				

					10-19
				

			

		

		

			
				
在AngularJS中，`ng-class`指令用于动态地根据表达式的值来添加或删除CSS类。这个特性在创建复杂的...无论是简单的切换还是复杂的条件判断，`ng-class`都能胜任。在实际开发中，应根据项目需求灵活选择最适合的用法。

			
		

	





	

		

			

				
					
AngularJS中关于ng-class指令的几种实现方式详解

				
			

			

				

					10-21
				

			

		

		

			
				
在AngularJS中，`ng-class`指令用于动态地根据表达式的值添加或移除CSS类。本文将详细解析三种使用`ng-class`的方法。  **第一种：通过数据的双向绑定**  这种方式是直接将控制器中的变量绑定到`ng-class`中。尽管...

			
		

	





	

		

			

				
					
angular.js 如何在html里根据ng-class的判断条件显示不同的图片

				
			

			

				

					05-26
				

			

		

		

			
				
可以使用ng-class指令来根据判断条件来动态设置class，然后在CSS中设置不同的背景图片。  例如，假设有两个图片"image1.jpg"和"image2.jpg"，根据ng-class的判断条件，显示不同的图片。  HTML代码如下：  ``` <div ...

			
		

	





	

		

			

				
					
Angular：带* ngClass的条件类

				
			

			

				

					p15097962069的博客
				

				

					05-12
					
					517
					
				

			

		

		

			
				
What is wrong with my Angular code? 我的Angular代码有什么问题？ I am getting: 我正进入（状态： 
Cannot read property 

			
		

	





	

		

			

				
					
ng-class几种写法

				
			

			

				

					zhou的专栏
				

				

					06-27
					
					1785
					
				

			

		

		

			
				
>


最常用:
ng-class="{'hide' : showTab != '1'}"

复杂判断:

ng-class="{'EXISTED':'list-list-suc span-icon-warp', 'DROPED':'list-list-alarm span-icon-warp'}[item.status]"

			
		

	





	

		

			

				
					
《Angular高级编程 4th》：ngClass和class区别，以及ngStyle和attr.

				
			

			

				

					dongnihao的博客
				

				

					09-05
					
					855
					
				

			

		

		

			
				
attr.xxxx]='属性值'      //xxxx是自定义的标签属性，‘属性值’别加双引号。如果是angular页面里的变量，直接写变量就可。这两个都是元素的样式属性，class相当于这个属性是静态的，是一个常量。而ng-class的属性是根据if来判断来选择应用不用的样式，因此它是动态的。attr.xxx 用于设置自定义属性，网上的说法作用是通过自定义属性属性名获取元素或者值。换句话说，ngClass可以在里面直接用写一些js逻辑（条件判断）同理，ngStyle也是动态的。

			
		

	





	

		

			

				
					
【Angular】04条件判断与循环语句

				
			

			

				

					学无止境
				

				

					08-14
					
					796
					
				

			

		

		

			
				
【Angular】04条件判断与循环语句

			
		

	





	

		

			

				
					
Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）

				
			

			

				

					天行健 君子以自强不息，地势坤 君子以厚德载物。
				

				

					03-15
					
					3678
					
				

			

		

		

			
				
图片
本地图片：
我们在assets目录下面新建images文件夹并且往里面放入图片。

<h1>引入图片</h1>
<img src="assets/images/虎牙.png" alt="虎牙">



网络图片（绑定图片）
  public picUrl: string =
    'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';

<h1>引入图片</h1

			
		

	





	

		

			

				
					
【angular教程240105】02绑定属性 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道

					
最新发布

				
			

			

				

					qq_53433382的博客
				

				

					01-06
					
					683
					
				

			

		

		

			
				
如果内置管道不满足需求，可以创建自己的管道。步骤生成管道：使用 Angular CLI 命令 ng generate pipe my-pipe。实现管道逻辑：在生成的管道类中实现 transform 方法。使用管道：在模板中与内置管道相同的方式使用。示例：创建简单的自定义管道// 实现你的转换逻辑/*** 导入了Angular核心库中的Pipe和PipeTransform。Pipe是一个装饰器，用于定义一个管道类，* 而PipeTransform是一个接口，

			
		

	





	

		

			

				
					
ng-class中的if else判断

				
			

			

				

					程序猿成长之路
				

				

					02-10
					
					1万+
					
				

			

		

		

			
				
来自于stackoverflow的一个问题，自己刚好用到，搬过来做个标记。原问题链接
在使用ng-class时，有些时候会碰到根据是否满足条件来设置元素的样式，使用以下方法可以达到这样的目的。
（1）使用运算符


这样写无需在javascript中添加额外代码，但是需要注意的是要让代码具有良好的可读性。
（2）使用额外的方法


然后使用以下的代码： 
$scope.setS

			
		

	





	

		

			

				
					
angularJs中关于ng-class的三种使用方式说明

				
			

			

				

					weixin_34355559的博客
				

				

					11-04
					
					317
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
关于angular 为动态获取元素中，需要获得事件的选项添加class的说明

				
			

			

				

					weixin_40098371的博客
				

				

					06-06
					
					3979
					
				

			

		

		

			
				
在JQ中如果要为某一项添加CLASS的话，直接使用addClass 就可以实现。那么angular要实现此项效果，就需要用ng-class。关于ng-class的使用说明，在W3C 中有说明，此处不再赘述。此处只针对我使用的部分进行说明。ng-class 可以采用key-value 的形式实现class的添加。形如：ng-class = '{key:value}'其中key为需要添加的class ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值