复杂的角度js ng-class [英] Complex angular js ng-class

问题描述

我有这个组件，但在为它设置 css 类时遇到问题.我希望它总是有一个box"类，然后有由指令class"参数指定的附加类和一个条件类mini".

从概念上讲，我想要实现的是这样的:

...

问题是我设置class html属性时，忽略了ng-class属性.如何在不更改控制器的情况下使我的示例工作?是否有可能，或者我应该在控制器中设置类(我希望避免)?

解决方案

我需要多个类，其中一个是 $scope 派生类，其他是文字类.感谢安德烈的提示，以下对我有用.

<h2 class="{{workStream.LatestBuildStatus}}"ng-class="{'expandedIcon':workStream.isVisible, 'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>

I have the component and have a problem setting the css class to it. I want it to always have a class of "box", then to have additional classes specified by the directive "class" argument and one conditional class "mini".

Conceptually what I want to achieve is something like this:

<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>

The problem is that when I set the class html attribute, the ng-class attribute is omitted. How to make my example work without changing the controller? Is it even possible, or should I set the class in the controller instead (which I wish to avoid)?

解决方案

I needed multiple classes where one was $scope derived and others were literal classes. Thanks to the hint from Andre, below worked for me.

<h2 class="{{workStream.LatestBuildStatus}}" 
    ng-class="{'expandedIcon':workStream.isVisible,  'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>

这篇关于复杂的角度js ng-class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！