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>

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

posted @   名字不好起啊  阅读(5029)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae