angular 的 ng-class 样式不生效问题

大家都知道 ng-class 的使用，绑定了一个对象，key 为 css 样式名，value 为 boolean ，true 的时候对应 css 样式值会生效~

今天的坑就是有关这个生效的问题。

下面来看一段代码：

 <!  DOCTYPE html  > 
 <  html   ng-app  ='myApp'  > 
     <  head  > 
         <  meta   charset  ='utf-8'  > 
         <  script   src  ='angular.js'  ></  script  > 
         <  style  >  
            ul.ul li   {  
                color  :   red  ; 
             }  
            .textGray   {  
                color  :   gray  ; 
             } 
         </  style  > 
     </  head  > 
     <  body  > 
         <  div   ng-controller  ='myCtrl'  > 
             <  ul   class  ='ul'  > 
                 <  li   ng-repeat  ="obj in list"   ng-click  ="canClickFnc(obj)"   ng-class  ='{"textGray":   !obj.canClick}'  >  
                    {{obj.name}} , canClick : {{obj.canClick}}
                  </  li  > 
             </  ul  > 
         </  div  > 
         <  script  >  
            angular.module(  "  myApp  "  ,[])
            .controller(  "  myCtrl  "  ,  function  ($scope){
                $scope.list   =   [];
                  var   enArr   =   [  '  a  '  ,  '  b  '  ,  '  c  '  ,  '  d  '  ,  '  e  '  ,  '  f  '  ];
                  var   i   =   0  ;
                  while   (i   <   5  ) {
                    $scope.list.push({  '  name  '  : enArr[Math.floor(Math.random()   *   enArr.length)],   '  canClick  '  : Math.round(Math.random())   ==   0   ?   true   :   false  });                    
                    i   ++  ;
                }
                
                $scope.canClickFnc   =   function   (obj) {
                      if  (  !  obj.canClick) {
                          return   false  ;
                    }
                    console.log(obj);
                }
            })
          </  script  > 
     </  body  > 
 </  html  > 

这段代码本身没有问题，使用的语法也都是正确的，可为什么样式就是出不来呢？

其实问题要发现也很容易，打开 F12 ，看 Element 样式值，就会发现 ng-class 添加的 textGray 是被删除线划掉的状态，也就是不可用的，这说明了什么？权值不够被覆盖了！那该怎么简单而有效的使 ng-class 生效呢？

哈哈，使用 "!imortant" ！

 <  style  >  
    .textGray   {  
        color  :   gray !important  ; 
     } 
 </  style  > 

说清楚了才发现特别简单系不！

查看更多关于angular 的 ng-class 样式不生效问题的详细内容...