更改CSS类的就点击属性 [英] Change CSS class's property on click

问题描述

我读过周围一点点，有一个良好的开始是我最终希望。 <一href=\"http://stackoverflow.com/questions/28138008/angularjs-how-to-change-the-color-property-via-toggle-when-css-class-does-chang\">This是有用的，与另一篇文章中，我忘了链接到一起。然而，一切我读过的添加 CSS类或属性的元素。我想的更改现有的CSS类的属性，但我不知道该如何定位它。

我觉得我要使用 纳克级 在从角文档采取这些用例之一：

1. 如果除权pression计算为一个字符串，字符串应该是一个或多个空格分隔类名。


2. 如果除权pression中的一个对象，然后为每个键值对的对象有truthy值对应的键被用作类名。

我现有的code使用纳克级与一些控制器逻辑一起。

HTML

 ＆LT; D​​IV NG控制器=ngToggle＆GT;
    ＆LT; D​​IV纳克级={'嵌入灰色边界：风格}＆GT;
        ＆LT; D​​IV CLASS =子容器NG点击=toggleStyle（）＆GT; {{item.name}}＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

这目​​前增加了插入灰色边界类嵌套的 DIV ，但我只是想改变在子容器类border属性。

控制器

  angular.module（应用）。控制器（'ngToggle'，['$范围'，函数（$范围）{
    $ scope.style = FALSE;
    $ scope.toggleStyle =功能（）{
        $ scope.style = $ scope.style ===假的？真假;
    };
}]）;
 

我认为用一条指令，但我相信这将是矫枉过正。我认为这是可以在控制器来实现。

编辑：在进一步研究后，我认为 jQLite 可以做的伎俩，但很可能需要一个指令。

解决方案

  

更改现有的CSS类的属性。

添加CSS规则，做，使用您添加​​使用纳克级的新类。特异性将在乘坐原始规则

  .subcontainer {
    颜色：蓝色
}
.inset灰色边界.subcontainer {
     颜色：红色
}
 

I've read around a little bit and have a good start to what I ultimately want. This was helpful, along with another article which I forgot the link to. However, everything I've read ADDS a CSS class or property to an element. I want to CHANGE a property of an existing CSS class, but I don't know how to target it.

I think I want to use ng-class in one of these use cases taken from the Angular documentation:

1. If the expression evaluates to a string, the string should be one or more space-delimited class names.
2. If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

My existing code uses ng-class along with some controller logic.

HTML

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

This currently adds the inset-gray-border class to the nested div, but I just want to change the border property in the subcontainer class.

Controller

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

I considered using a directive, but I believe that would be overkill. I think this can be achieved in a controller.

EDIT: After further research I think jQLite can do the trick, but that would probably require a directive.

解决方案

CHANGE a property of an existing CSS class

Add a css rule that does that using the new class you added using ng-class. The specificity will over ride the original rule

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

这篇关于更改CSS类的就点击属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！