Question

我已经阅读了一点，并开始了我最终想要的东西。 This很有帮助，还有另一篇文章，我忘记了链接。但是，我读过的所有内容 ADDS 是一个元素的CSS类或属性。我想更改现有CSS类的属性，但我不知道如何定位它。

我想我想在Angular文档中使用的其中一个用例中使用ng-class：

如果表达式求值为字符串，则该字符串应为一个或多个以空格分隔的类名。
如果表达式求值为一个对象，则对于具有truthy值的对象的每个键值对，相应的键将用作类名。

我现有的代码使用ng-class和一些控制器逻辑。

HTML

<div ng-controller="ngToggle">
    <div ng-class="{'inset-gray-border' : style}">
        <div class="subcontainer" ng-click="toggleStyle()">{{item.name}}</div>
    </div>
</div>

这会将inset-gray-border类添加到嵌套的div，但我只想更改subcontainer类中的border属性。

控制器

angular.module('app').controller('ngToggle', ['$scope', function($scope) {
    $scope.style = false;
    $scope.toggleStyle = function() {
        $scope.style = $scope.style === false ? true: false;
    };
}]);

我考虑过使用指令，但我认为这样会有点过分。我认为这可以在控制器中实现。

编辑：经过进一步的研究，我认为jQLite可以解决这个问题，但这可能需要一个指令。

Answer 1

您可以只在UI端编写这些东西，而不是大的toggleStyle函数。 Here是小提琴。如果要更改.subcontainer的边框属性，请通过添加.insert-gray-border

覆盖该属性

<div ng-controller="ngToggle">
    <div >
        <div ng-class="{'subcontainer':true,'inset-gray-border' : style}" ng-click="style=!style">{{item.name}}</div>
    </div>
</div>

这样做的好处是，它使用局部范围而不是控制器范围。

Answer 2

更改现有CSS类的属性

使用您使用ng-class添加的新类添加一个css规则。特异性将超过原始规则

.subcontainer{ 
    color : blue
}
.inset-gray-border .subcontainer{
     color:red
}

Answer 3

最好的办法是定义两个CSS类，一个用于基础（未加镜像），另一个用于切换属性时所需的所有属性。

在这种情况下，您可能需要以下内容：

.container .subcontainer {}
.container .subcontainer-bordered { border: solid 1px #123456}

然后更新您的HTML代码以反映此结构

<div ng-controller="ngToggle">
    <div class="container">
        <div class="subcontainer" ng-class="{'subcontainer-bordered': style}" ng-click="style = !style">{{item.name}}</div>
    </div>
</div>

单击更改CSS类的属性

3 个答案: