大家都知道 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>
說清楚了才發現特別簡單系不！