2

我正在构建一个 SPA，可以在单击按钮时添加一个表格行：

<!-- Table -->
<table>
  <tr>
    <th>Lieferscheinnummer</th>
    <th>Stück</th>
  </tr>

  <tr ng-repeat="position in positions">
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>

<!-- button -->
<span ng-click="addPosition()"></span>

控制器

$scope.positions = ['1'];
$scope.addPosition = function(){
    $scope.positions.push( $scope.positions.length + 1 );
}

现在我必须对每一行应用一个唯一ng-model的<td>，以便将给定的输入发送到我的数据库。

我搜索了一个解决方案并偶然发现了ng-repeat. $index不幸的是，$index似乎不适用于元素属性：

<tr ng-repeat="position in positions">
    <td><input type="text" ng-model="{{$index +1}}"></td> <!-- does not work -->
    <td><input type="text"></td>
</tr>

使用时如何ng-model对每一行应用唯一的ng-repeat？

4

1 回答 1

2

你可以改变你的模型。目前，您正在使用ng-repeat类似的计数器。您有一个存储元素的模型 - 无论如何您都没有使用元素，只是利用列表中的元素数量并循环多次。

相反，您可以做的是拥有一个独特模型的列表。

考虑到您在表中使用它，每个条目都可以有一个 ID 字段来唯一标识每一行。

因此，您的模型将如下所示： 

//Will contain the data entered in the table
$scope.tableData = [
    {
        id: 1,
        data: ""
    },
    {
        id: 2,
        data: ""
    }
];

//Will keep track of the last used ID
$scope.currentId = 2;

//Will add a record to the table each time it is called
$scope.addRecord = function () {
    var newRecord = {
        id: $scope.currentId++;
        data: ""
    };
    $scope.tableData.push(newRecord);
};

在您看来，您现在可以使用tableData循环遍历实际数据本身而不是记录数：

<tr ng-repeat="entry in tableData">
    <td>
        <input type="text" ng-model="entry.data">
    </td>
</tr>

对于另一个输入，您可以简单地为每条记录添加另一个属性。ng-repeat将为每个记录创建一个范围，因此entry.data将始终指向data位于该行的记录的属性。

注意：对于 ID，您可能必须使用另一种方法为大量记录生成唯一 ID。简单地增加一个计数器不是最好的方法。

于 2013-06-30T12:29:11.063 回答