ng class 有条件

Question

如果值不为 null 或为空，我需要有条件地将 class 应用到我的 div，但语法有问题。这就是我正在尝试的：

<div ng-repeat="itemTabelNutricional in item.propriedadesNutricionais.obrigatorias">
  <div class="row">
    <div class="col-xs-12 col-lg-3">
      <div class="form-group">
        <label ng-bind-html="itemTabelNutricional.nutrientTypeCode.nome"></label>
      </div>
    </div>
    <div class="col-xs-12 col-lg-3">
      <div class="form-group" ng-class="!!itemTabelNutricional.measurementPrecisionCode ? {'has-error': form.nutricional.itemTabelNutricional.quantityContained.$invalid && form.submitted} : ''">
        <input type="text"
               class="form-control ng-pristine ng-untouched ng-valid ng-valid-maxlength"
               maxlength="255"
               data-toggle="popover"
               data-trigger="hover"
               data-container="body"
               data-content="Informe a quantidade."
               ng-required="true"
               ng-model="itemTabelNutricional.quantityContained" />

      </div>
    </div>
  </div>
</div>

它不能正常工作，因为我仍然得到 class 即使值为 null 或空..有什么想法吗？

Answer 1

问题是 ng-class 需要是字符串或对象表达式。试试这个：

ng-class="(!!itemTabelNutricional.measurementPrecisionCode && form.nutricional.itemTabelNutricional.quantityContained.$invalid && form.submitted ? 'has-error': '')"

或者：

ng-class="{'has-error': (!!itemTabelNutricional.measurementPrecisionCode && form.nutricional.itemTabelNutricional.quantityContained.$invalid && form.submitted)}"

Answer 2

Ng-class 收到一个对象表达式，试着把条件放在对象里面，像这样：

ng-class="{'has-error': itemTabelNutricional.measurementPrecisionCode && form.nutricional.itemTabelNutricional.quantityContained.$invalid && form.submitted}">

ng class 有条件

Ng class with condition

angularjs

ternary-operator

ng-class