Question

我有一个通过angularJS数组从数据库填充的表。

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Code</th>
            <th>Description</th>
            <th>Budget Amount</th>
            <th>Actual Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="lineItem in vm.budget.budgetLines">
            <td>
                {{lineItem.code}}
            </td>

            <td>@{{lineItem.description}}</td>
            <td>{{lineItem.budgetAmount | currency}}</td>
            <td><input type="number" class="form-control" ng-model="lineItem.actualAmount" required /></td>
        </tr>
    </tbody>
</table>

数据填充正常。但是如果查看表格，您会注意到最后一列中的输入字段。我需要能够对输入所做的更改执行更新，我只需要操作的第1列和最后一列。我使用了以下方法，但它没有用，因为它只使用了首次填充表的原始值。

$scope.lineItems = [];

for (var i = 0; i < vm.budget.budgetLines.length; i++) {
    var lineItem = vm.budget.budgetLines[i];
    $scope.lineItems.push({
        'code': lineItem.code,
        'actualAmount': lineItem.actualAmount
    });
}

所以我想在我的角度控制器中使用纯javascript循环遍历表行，并像这样推送我需要的列;

var myTable = document.getElementById("tblValues");
var current, cell;
for (var i = 0; i < myTable.rows.length ; i++) {
    var rowItem = myTable.rows[i];
    $scope.lineItems.push({
        'code': rowItem.cells[1],
        'actualAmount': rowItem.cells[4].children[0].value
    });
}

但是在控制台中抛出了一个错误： rowItem.cells [4] .children [0]未定义

请问我怎样才能让它按照我想要的方式工作？

Answer 1

我按照我希望的方式让它工作。

var myTable = document.getElementById("tblValues");
var current, cell;
$scope.lineItems.length = 0;
for (var i = 0; i < myTable.rows.length ; i++) {
    var rowItem = myTable.rows[i + 1];
    $scope.lineItems.push({
        'code': rowItem.cells[1].innerText,
        'actualAmount': rowItem.cells[4].firstChild.value
    });
}

如何遍历AngularJS中的值表

1 个答案: