AngularJS 在ng-repeat中为表单提供动态名称

在本文中，我们将介绍如何在AngularJS的ng-repeat指令中为表单提供动态名称。通常情况下，我们可以通过使用ng-model来为表单元素提供唯一的名称，ng-repeat可用于动态生成表单元素。但是，如果我们希望为每个动态生成的表单元素提供不同的名称，我们需要一种方法来动态创建和更新名称。

阅读更多：AngularJS 教程

为表单元素提供动态名称

在ng-repeat中为表单元素提供动态名称的一种常见需求是在表单中循环显示一组输入框，并为每个输入框设置不同的名称。为了实现这一目标，我们可以使用AngularJS的$index变量结合ng-init来创建动态名称。

<div ng-repeat="item in items" ng-init="name = 'input' + $index">
  <input type="text" name="{{name}}" ng-model="item.value">
</div>

在上面的代码中，我们通过ng-init将名称初始化为”input” + $index。$ index是ng-repeat内置的一个变量，它表示当前循环中的索引值。通过将该名称绑定到input元素的name属性上，我们可以为每个输入框动态生成一个唯一的名称。

示例说明

让我们通过一个示例来说明如何在ng-repeat中为表单元素提供动态名称。假设我们有一个动态添加用户的表单，每个用户都由姓名和邮箱组成。我们将使用ng-repeat指令来循环显示一组输入框，并为每个输入框提供不同的名称。

<div ng-repeat="user in users" ng-init="name = 'user' + $index">
  <label for="{{name}}">姓名：</label>
  <input type="text" id="{{name}}" name="{{name}}" ng-model="user.name">

  <label for="{{name}}_email">邮箱：</label>
  <input type="email" id="{{name}}_email" name="{{name}}_email" ng-model="user.email">
</div>

<button ng-click="addUser()">添加用户</button>

在上面的代码中，我们使用了ng-repeat指令来循环显示一组输入框，每个输入框对应一个用户。在ng-init中，我们为每个用户设置了动态名称，例如’user0’、’user1’等。然后，我们使用这些名称来设置label元素的for属性和input元素的id和name属性。这确保了每个输入框都有唯一的标识符。

我们还添加了一个按钮，当点击该按钮时，将通过addUser()函数向用户数组中添加一个新用户对象。由于我们为每个输入框指定了ng-model，所以用户输入的值将自动与相应的用户对象绑定。