角度 ng-repeat 创建多个表单语法错误答案

【问题标题】：angular ng-repeat creating multiple forms syntax error角度 ng-repeat 创建多个表单语法错误
【发布时间】：2016-01-06 10:55:50
【问题描述】：

我正在重复一组项目，并且我希望每个项目都有自己的表单和自己的提交按钮，这会将表单信息发送到提交功能。我需要知道正在提交哪个项目，所以我想我会为每个项目创建一个表单，这将表明正在提交哪个表单。目前，它是这样重复的：

<input ng-model="query" type="text" placeholder="Filter by" autofocus>
<ul class="gNow">
    <li ng-repeat="item in selRole.selectRoles | multifilter:query">
        <form name="selRoleForm-{{item.rowId}}" ng-submit="selRole.selectRole(selRoleForm-{{item.rowId}})" novalidate>
            <div class="card">
                <p>Card Name: {{item.cardName}}</p>
                <p>.. other form elements here ..</p>
                <p><button type="submit">Select</button></p>
            </div>
        </form>
    </li>
</ul>

我收到以下错误：

[$parse:syntax] 语法错误：第 33 列的标记“{”无效键表达式 [selRole.selectRole(selRoleForm-{{item.rowId}})] 从 [{item.rowId}})] 开始。

我做错了什么 - 还是有更好的方法来解决这个问题？

This SO post 是我能找到的最接近我的问题的方法，但我仍然不确定我是否了解如何适应我的特定需求。

更新： 感谢所有让我找到解决方案的回复。我不需要在提交函数中包含表单名称，而是包含项目。这就是所缺少的一切。

旧（语法错误）：

ng-submit="selRole.selectRole(selRoleForm-{{item.rowId}})"

新的（工作）：

ng-submit="selRole.selectRole(item)"

【问题讨论】：

标签： angularjs forms angularjs-ng-repeat

【解决方案1】：

只需将表单名称存储在您的 ng-repeated 数组中：

<input ng-model="query" type="text" placeholder="Filter by" autofocus>
<ul class="gNow">
    <li ng-repeat="item in selRole.selectRoles | multifilter:query">
        <form name="{{item.formName}}" ng-submit="selRole.selectRole(item.formName)" novalidate>
        ...

【讨论】：

这修复了语法错误，为我指明了正确的方向。这让我看到了真正的问题，即没有在 ng-submit 函数中传递正确的对象。添加了对问题的更新以及解决方案。

【解决方案2】：

使用 ngForm ：

<div class="form-group" ng-repeat="item in selRole.selectRoles | multifilter:query">
  <ng-form name="userFieldForm">
    <label></label>
    <input >
  </ng-form>
  </div>

【讨论】：

【解决方案3】：

您只需要在名称的串联中反转转换。在 ng-submit 上解析参数时，您需要转换的是硬编码字符串，而不是 rowId。

会是这样的：

<input ng-model="query" type="text" placeholder="Filter by" autofocus>
<ul class="gNow">
<li ng-repeat="item in selRole.selectRoles | multifilter:query">
    <form name="selRoleForm-{{item.rowId}}" ng-submit="selRole.selectRole('selRoleForm-'+item.rowId)" novalidate>
        <div class="card">
            <p>Card Name: {{item.cardName}}</p>
            <p>.. other form elements here ..</p>
            <p><button type="submit">Select</button></p>
        </div>
    </form>
</li>

【讨论】：