Question

是否可以将ngClass与表达式和类映射一起使用？我想根据变量的存在有条件地添加一个类，并在创建该类的表达式中使用该变量。

例如，如果isActive（）为true且getStatus（）返回＆＃34;有效＆＃34;我希望类列表是＆＃34;元素元素 - 活动元素 - 有效＆＃34;。如果getStatus（）返回undefined我希望类列表是＆＃34;元素元素 - 活动＆＃34;。

<div
  class="element"
  ng-class="{
   'element--active': ctrl.isActive(),
   'element--{{ ctrl.getStatus() }}': ctrl.getStatus() 
  }"></div>

似乎没有效果。

<div 
  class="element element--{{ctrl.getStatus()}}"
  ng-class="{
   'element--active': ctrl.isActive()
  }"></div>

工作，但那里有一个额外的悬挂元素 - ＆＃34;如果getStatus（）返回undefined。

我是否必须在控制器中添加一个方法来处理类生成？

Answer 1

我建议只进行一次函数调用来获取类。它会使它更清晰，并在一个地方具有类逻辑。

在您的控制器中：

this.getElementStatus = function(){
   var rules = {active:this.isActive()}; //Prefix with element-- {element--active:}
   rules[this.getStatus()] = true; //Prefix with element--, rules['element--' + this.getStatus()] = true
   return rules;
}

你的观点就是：

<div 
  class="element"
  ng-class="ctrl.getElementStatus()"></div>

似乎您的element--对规则是多余的，而是使用可级联性（CSS）属性。并将规则定义为：

示例：

.element.active{ /*....*/ }
.element.success {/*...*/}
.element.error{/*...*/}

这将有助于维护，变得更加冗长，并且可以自然地添加css规则，并且可以从视图中消除这些复杂性。

你也可以这样做：

<div class="element" 
     ng-class="{'active': ctrl.isActive(), '{{ctrl.getStatus()}}':true}"

或：

<div class="element" 
     ng-class="[ctrl.isActive() ? 'active' : '', ctrl.getStatus()]"

如果您不介意通常添加true（不应该影响任何事情）那么，

 <div class="element" 
     ng-class="[!ctrl.isActive() || 'element--active' , 'element--' + ctrl.getStatus()]">

Answer 2

您可以在同一元素上使用class和ng-class映射。但由于你的班级名称是动态的，你将不得不这样做。

<div
  ng-class="'element '
            + (ctrl.isActive() ? ' element--active' : '') 
            + (ctrl.getStatus() ? ' element--' + ctrl.getStatus() : '')"></div>

ngClass字符串绑定表达式与类映射

2 个答案: