我正在构建一个 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>
并且您可以在 ngRepeat
中使用 {{$index}}
来动态声明项。但这似乎不适用于 ngMessages
,当我尝试将索引绑定(bind)到其中时会抛出错误。
即这个:
<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 (检查控制台)
最佳答案
ng-messages="form['something_' + $index].$error"
应该可以。我通常不会将 {{ }} 放在任何 ng 指令中,因为大多数 ng 指令以优先级 0 执行(包括 {{ }} 指令,ngBind)。此外,ng 指令都在其参数上使用 $evaluate,因此默认情况下它们会查看作用域中的变量值。
同一元素上的多个指令的优先级为 0 意味着 Angular 无法保证首先应用哪个指令。因此,通常最好避免一起使用 ngDirectives,因为行为可能会有所不同。 ngIf 是一个异常(exception),因为它以优先级 600 执行(这就是为什么无论如何都不为当前不在 DOM 中的 ng-if 元素评估指令的原因)。
关于javascript - AngularJS ngMessages 无法绑定(bind)到 $index 表达式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31863720/