Ng class with condition

Question

I need to conditionally apply a class to my div if a value isn't null or empty but I'm having issue with the syntax. This what I'm trying:

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

Its not working properly because I still get the class even with the value as null or empty..any ideas?

Answer 1

The issue is that ng-class needs to either be a string or an object expression. Try this:

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

Alternatively:

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