ng-class不评估表达式

Question

我试图在我的angularJs应用程序中实现ng-class但是由于某些原因，ng-class中的表达式没有被应用，有什么想法吗？

<span>{{prod.item.count}}</span>

<div ng-class="{'show-error-box' : prod.item.length< 1}" class="hide-error-box">

prod是视图中的控制器别名，item是我的控制器中的范围对象

我想要课程＆＃39; show-error-box＆＃39;当项目数小于1时，否则应用类hide-error-box。因为我没有任何测试数据用0长度来测试这个，所以用ng-class =＆＃34; {＆＃39; show-error-box＆＃39; ：0＆lt; 1}＆＃34;在这种情况下应该应用show-error-box，但它没有发生。

• CSS：

  .hide-error-box { 显示：无; }

  .show-error-box {     向左飘浮;     宽度：100％; 背景：#fff; text-align：center; 填充：10％0; 身高：700px; 位置：绝对; }

Answer 1

ng-class不能替代“class”。如果关联值为true，它将添加名称为对象键的任何类。

这个div将只有两个选项：

class="hide-error-box"

或

class="hide-error-box show-error-box"

为了达到理想的效果，您可以将相反的条件作为隐藏类的值。

ng-class="{hide-error-box: prod.item.length >= 1, show-error-box: prod.item.length < 1}"

但是，通常建议您尽可能使模板不受逻辑限制。将其置于控制器功能中可能值得考虑：

HTML

<div class="{{getSizeClass()}}">

JS

this.getSizeClass = function() { if (item.length >= 1) { return 'hide-error-box' } return 'show-error-box' }