angularjs-ng-click - 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 是我在 View 中的 Controller 别名，item 是我 Controller 中的范围对象

当项目数小于 1 时，我想要类“show-error-box”，否则应用类 hide-error-box。由于我没有任何测试数据来测试长度为 0 的值，因此我将表达式替换为 ng-class="{'show-error-box' : 0< 1}"在这种情况下 show-error-box 应该得到应用，但它没有发生。

• CSS:

  .隐藏错误框{ 显示:无； }

  .show-error-box { 向左飘浮; 宽度:100%； 背景:#fff； 文本对齐:居中； 填充:10% 0； 高度:700 像素； position:absolute； }

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}"

但是，通常建议您使模板尽可能远离逻辑。可能值得考虑将其放入 Controller 函数中:

HTML

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

JS

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