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 @ 2017-05-11 15:21  名字不好起啊  阅读(4996)  评论(0)  编辑  收藏  举报