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

2024-04-09

我正在构建一个 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 http://plnkr.co/edit/4oOasbtffTgKqmxcppUG?p=preview(检查控制台)


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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS ngMessages 无法绑定到 $index 表达式 的相关文章

随机推荐