关于angular的ng-class条件判断

最新推荐文章于 2023-06-03 14:38:51 发布
最新推荐文章于 2023-06-03 14:38:51 发布
阅读量615 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/momodaolai/p/5741639.html
版权

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

                

        

        




    




    

      

        

            

              
                
                  weixin_30386713
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Angular ng-class详解及实例代码

				
			

			

				

					09-01
				

			

		

		

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

			
		

	



                

              
                



	

		

			

				
					
angularJs的ng-class切换class

				
			

			

				

					10-19
				

			

		

		

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

			
		

	



                


  
              

                


	

		

			

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

				
			

			

				

					xwnxwn的专栏
				

				

					08-25
					
					3046
					
				

			

		

		

			
				
转载： https://blog.csdn.net/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
					
					287
					
				

			

		

		

			
				
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：带* ngClass的条件类

				
			

			

				

					p15097962069的博客
				

				

					05-12
					
					441
					
				

			

		

		

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

			
		

	





	

		

			

				
					
Highlight-a-selected-row-in-ng-repeat-using-ng-class:使用 ng-class Angular JS 突出显示 ng-repeat 中的选定行

				
			

			

				

					07-08
				

			

		

		

			
				
在本教程中，我们将探讨如何结合使用`ng-repeat`和`ng-class`来实现这一功能。  首先，我们需要一个简单的HTML结构，其中包含一个`ng-repeat`指令来遍历数据集：  ```html   <tr ng-repeat="item in items" ng-class...

			
		

	





	

		

			

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

				
			

			

				

					10-21
				

			

		

		

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

			
		

	





	

		

			

				
					
Angularjs使用ng-repeat中$even和$odd属性的注意事项

				
			

			

				

					11-26
				

			

		

		

			
				
 在示例中，`ng-class` 用于根据 `$even` 和 `$odd` 的值动态地改变元素的CSS类。当 `$even` 为 `true` 时，添加 `even` 类，将背景色设为蓝色；当 `$odd` 为 `true` 时，添加 `odd` 类，将背景色设为红色。这样就...

			
		

	





	

		

			

				
					
Angular 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道 、事件、表单事件、事件对象、双向数据绑定

				
			

			

				

					03-05
				

			

		

		

			
				
Angular 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道 、事件、表单事件、事件对象、双向数据绑定

			
		

	





	

		

			

				
					
ng-class几种写法

				
			

			

				

					zhou的专栏
				

				

					06-27
					
					1722
					
				

			

		

		

			
				
>


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

复杂判断:

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

			
		

	





	

		

			

				
					
angular知识点--ngClass几种用法

					
最新发布

				
			

			

				

					fupo
				

				

					06-03
					
					2403
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					dongnihao的博客
				

				

					09-05
					
					749
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					03-15
					
					3573
					
				

			

		

		

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

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



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

<h1>引入图片</h1

			
		

	





	

		

			

				
					
ng-class中的if else判断

				
			

			

				

					程序猿成长之路
				

				

					02-10
					
					1万+
					
				

			

		

		

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


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


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

			
		

	





	

		

			

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

				
			

			

				

					weixin_34355559的博客
				

				

					11-04
					
					279
					
				

			

		

		

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

			
		

	





	

		

			

				
					
angular里面ng-class的几个用法

				
			

			

				

					weixin_30342209的博客
				

				

					07-22
					
					264
					
				

			

		

		

			
				
ng-class可以动态的给元素添加样式，在我之前用的一些实例中除了基本的用法之外，还总结了两个小点的tips
1、当你的列表是ng-repeat出来的话，当点击某一个列的时候希望给他加上某个样式，


<ui ng-repeat="i in [1,2,3]"><li ng-class="{'tabnav-active':$index==selected}">&...

			
		

	





	

		

			

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

				
			

			

				

					weixin_40098371的博客
				

				

					06-06
					
					3886
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					05-26
				

			

		

		

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

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值