带有生成字段的 Ng-repeat 提交表单

Question

我有这个问题，我有一个 ng-repeat，我在其中添加了一些输入字段，我想将这些输入的值提交给生成的表单 - 不适用于 ng-model，但我可以吗通过在表单标签内输入名称获取。

<li ng-repeat="group in tournament.groups">
    <form novalidate ng-submit="tournament.submit(group.team1, group.team2)">
        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x">
        </span> - <span>
            <input type="number" name="team2" placeholder="x">
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
    </form>
</li>

Answer 1

您应该使用 ng-model 绑定输入 & form 的 name 属性丢失，因此您的 ng-submit 没有被触发。

当您将名称属性添加到 form 时，假设 name="team" 当时 angular 确实在范围内创建了一个新变量并添加了所有与表单有效性相关的表单信息& 各个字段的信息。

标记

<li ng-repeat="group in tournament.groups">
    <form name="team" novalidate ng-submit="tournament.submit(group.team1, group.team2)">
        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x" ng-model="group.team1"/>
        </span> - <span>
            <input type="number" name="team2" placeholder="x" ng-model="group.team2"/>
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
    </form>
</li>

Answer 2

使用 ng-模型：

查看：

<li ng-repeat="group in tournament.groups">
    <form novalidate ng-submit="submit()">
        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x" ng-model="group.team1.name">
        </span> - <span>
            <input type="number" name="team2" placeholder="x" ng-model="group.team2.name">
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
    </form>
</li>

在控制器中：

$scope.submit = function(){
   console.log($scope.group.team1.name);
   console.log($scope.group.team2.name);
};

你会得到你的价值。尝试一次我的代码。

Answer 3

在您使用的方法中，您将拥有多种形式。我建议您只有一种形式，并在该形式内进行迭代，如下所示：

<form name="team" novalidate ng-submit="tournament.submit(group.team1, group.team2)">
    <li ng-repeat="group in tournament.groups">

        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x" ng-model="team1"/>
        </span> - <span>
            <input type="number" name="team2" placeholder="x" ng-model="team2"/>
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
   </li>
</form>

并相应地使用“$index”为每个组更新 ng-model（如 ng-model="team{{$index}}"）

我想这应该可以解决问题。

带有生成字段的 Ng-repeat 提交表单

Ng-repeat submit form with generated fields

javascript

forms

validation

angularjs

angularjs-ng-form