大家都知道 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>
说清楚了才发现特别简单系不！