Question

我正在构建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的{{1}}。不幸的是，$index似乎不适用于元素属性：

$index

在使用<tr ng-repeat="position in positions"> <td><input type="text" ng-model="{{$index +1}}"></td>  <td><input type="text"></td> </tr>时，如何为每行应用唯一的ng-model？

Answer 1

您可以更改模型。目前，您正在使用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。简单地增加一个计数器将不是最好的方法。

使用$ index表示ng-model

1 个答案: