Angular ng-class 不适用于字段中的无效值

Question

我有一个Angular代码如下。当我在文本框中输入字符时，它应该在div(parent( 标签中应用 ng 类"错误"。这行不通。

知道问题是什么吗？

法典：

<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

问题是你正在将 Angular 模板{{}}与已经可表达的语法混合在一起。像这样更正ng-class的用法：

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

和

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

Answer 2

ng-class期望表达式，它不处理{{}}(插值(指令，如果传递{{expression}}，那么您会看到错误。您必须将ng-class表达式更正为以下内容。

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