AngularJS ngMessages无法绑定到$ index表达式

Question

我正在构建一个Angular表单,它需要一个可重复的表单元素ngRepeat.

<form name="form">
    <div ng-repeat="x in [1,2,3,4]">
      <input name="something_{{$index}}" ng-model="hi" required>
      <div ng-messages="form.something_{{$index}}.$error">
        <ng-message="required">This is required</ng-message>
      </div>
    </div>
    <pre>{{form | json: 4}}</pre>
  </form>

Angular现在支持动态声明的input名称,因此您不必执行以下操作:

<div ng-repeat="x in [1,2,3,4] ng-form="repeated-form"></div>

你可以{{$index}}在里面用它ngRepeat来动态地声明项目.但这似乎不起作用ngMessages,当我尝试将索引绑定到它时会抛出错误.

即:

<div ng-messages="form.something_{{$index}}.$error">

抛出这个:

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 16 of the expression [form.something_{{$index}}.$error] starting at [{{$index}}.$error].

如果ng-messages不能观察用{{$ index}}声明的表单值,我们如何动态声明表单上的哪个属性？

PLNKR:http://plnkr.co/edit/4oOasbtffTgKqmxcppUG？p = preview (检查控制台)

Answer 1

ng-messages="form['something_' + $index].$error"

应该管用.我通常不会将{{}}放在任何ng指令中,因为大多数ng指令都以优先级0执行(包括{{}}指令ngBind).此外,ng指令都在其参数上使用$ evaluate,因此默认情况下它们会查看范围中的变量值.

同一元素上的多个指令的优先级0意味着Angular无法保证首先应用哪个指令.因此,通常最好避免一起使用ngDirectives,因为行为可能会有所不同.ngIf是一个例外,因为它以优先级600执行(这就是为什么不针对当前不在DOM中的ng-if元素评估指令的原因).

Answer 2

    <div ng-repeat="x in [0,1,2,3]">
      <input name="something_{{$index}}" ng-model="hi" required>
      <div ng-messages="form['something_' + $index].$error">
        <ng-message="required">This is required</ng-message>
      </div>
    </div>

http://plnkr.co/edit/k5nzkpkJwSuf5dvlMMZi?p=preview