如何使用ng重复和ng模型将动态值绑定到输入

How to bind dynamic value to input using ng-repeat and ng-model?

本文关键字：ng 动态 绑定 输入 模型 何使用      更新时间：2023-11-08

在将值绑定到角度输入时遇到一些问题。我首先初始化了"object[component.name]"，然后将该值分配给ng模型。我这样做是因为我必须绑定ng-rerepeat的值。但这会给我带来错误。以下是我的代码片段。如有任何帮助，我们将不胜感激。

<div ng-repeat="component in reportTemplate" class="inputFieldSection inputFieldTitle" ng-if="component.type == 'text'">
                          <label class="item item-input">
                            <input type="text" name={{component.name}} ng-init="object[component.name]={{component.name}}"  ng-model="object[component.name]" ng-focus="clearValidation();" max-length="50" required placeholder="{{component.label}}">
                          </label>
                          <p ng-show="createReportForm.{{component.name}}.$error.required">Please Enter {{component.name}}</p>
                   </div>

这是我在控制台中得到的错误

ionic.bundle.js:25510 Error: [$parse:syntax] Syntax Error: Token '{' invalid  key at column 25 of the expression [object[component.name]={{component.name}}] starting at [{component.name}}].
 http://errors.angularjs.org/1.4.3/$parse/syntax?p0=%7B&p1=invalid%20key&p2=…Bcomponent.name%5D%3D%7B%7Bcomponent.name%7D%7D&p4=%7Bcomponent.name%7D%7D
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:13248:12
at Object.AST.throwError (http://localhost:8100/lib/ionic/js/ionic.bundle.js:26061:11)
at Object.AST.object (http://localhost:8100/lib/ionic/js/ionic.bundle.js:26048:16)
at Object.AST.primary (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25956:22)
at Object.AST.unary (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25944:19)
at Object.AST.multiplicative (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25931:21)
at Object.AST.additive (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25922:21)
at Object.AST.relational (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25913:21)
at Object.AST.equality (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25904:21)
at Object.AST.logicalAND (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25896:21) <input type="text" name="{{component.name}}" ng-init="object[component.name]={{component.name}}" ng-model="object[component.name]" ng-focus="clearValidation();" max-length="50" required="" placeholder="{{component.label}}" class="ng-pristine ng-untouched ng-valid">

ng-show指令中不应包含{{}}（插值指令）。您可以使用对象index访问createReportForm对象。

ng-show="createReportForm[component.name].$error.required"

ng-init也有相同的错误ng-init="object[component.name] = component.name"

不确定为什么要使用ng-init指令，应该避免使用。

相关文章：