Question

我有一个Angular代码如下。当我在文本框中输入一个字符时，它应该在div（父）标记中应用ng-class“error”。这不起作用。

知道问题是什么吗？

代码：

<ng-form name="innerForm">
  <table>
    <tbody>
      <tr ng-repeat="value in values>
        <td>
          <div class="control-group input-append no-margin" ng-class="{error: innerForm.val_{{$index}}.$invalid}">
            <input  name="val_{{$index}}" id="val_{{$index}}" ng-model="value.val" ng-class="{edited: innerForm.val_{{$index}}}.$dirty"
          type="text" ng-pattern="/^\d*\.?\d{0,2}$/" ng-required />
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</ng-form>

这是一个例子。当我输入字母表时，应该通过文本框周围的背景颜色。但它不会发生。 http://embed.plnkr.co/cchyQYE69lnkjEqUNGGv/

Answer 1

ng-class期望表达式，它不会处理{{}}（插值）指令，如果你通过{{expression}}，那么你会看到一个错误。您必须将ng-class表达式更正为下方。

ng-class="{error: innerForm['val_'+ $index].$invalid}"
ng-class="{edited: innerForm['val_'+ $index].$dirty"

Answer 2

问题在于您将Angular模板{{}}与已经可表达的语法混合在一起。正确使用ng-class这样的用法：

ng-class="{error: innerForm['val_' + $index].$invalid}"

和

ng-class="{edited: innerForm['val_' + $index].$dirty}"

Angular ng-class不适用于字段

2 个答案: