复杂的角度js ng级

Question

我有组件,并在设置css类时遇到问题.我希望它总是有一个"box"类,然后有指令"class"参数和一个条件类"mini"指定的其他类.

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

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

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

Answer 1

一个快速的解决方案是在ng-class属性中定义box类:

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

如果要将范围变量作为类包含,则不能使用ng-class:

<div class="{{class}} box {{!isMaximized && 'mini' || ''}}">

Angular表达式不支持三元运算符,但它可以像这样模拟:

condition &&(如果是,则回答)|| (如果错误则回答)

Answer 2

我需要多个类,其中一个是$ scope派生的,另一些是文字类.感谢安德烈的暗示,下面为我工作.

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