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>

說清楚了才發現特別簡單系不!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM