时间戳

首页 > 解决方案 > 如何使用angular js保存html表格的多行数据

angularjs - 如何使用angular js保存html表格的多行数据

问题描述

我创建了一个动态添加新行的表。但我无法保存数据。如何创建单独的每行数据以及如何将数据传递给控制器​​。这是代码。

<table class="table">
    <thead>
  <tr>
                <th scope="col">ID</th>
                <th scope="col"> File</th>
                <th scope="col">Comments</th>
              </tr>
            </thead>
            <tbody>

             <tr ng-repeat="row in table.rows ">
                <td><input type="text" ng-model="rowdata.id"></td>
                <td><input type="text" ng-model="rowdata.file"></td>

                <td><input type="text" ng-model="rowdata.Comments"></td>
              </tr>
            </tbody>
          </table>

      <button type="button" class="btn btn-secondary"
              ng-click="addNewRow(table)">Add New Row</button>
      <button type="button" class="btn btn-primary"
              ng-click = "saveData(rowdata)">Save changes</button>

控制器.js

 .controller('homeController',function($scope){
$scope.table=[{name: "table 1"}];

    $scope.table.rows = [{name: "row 1"}];

    $scope.counter = 3;
$scope.addNewRow=function(table){
    table.rows.push({name: "row " + $scope.counter});
}

$scope.saveData=function(data){
    console.log(data);
    localStorage.setItem('data',data);

}
    })

在这里，当我单击保存时，我在控制台中变得未定义。我希望传递行中的数据。一旦我点击保存按钮，数据应该被保存，它应该在表格中反映为不可编辑的字段。

标签： angularjs

解决方案

您只需要保存$scope.table.rows在控制器中，无需将rowdata（不存在的）作为参数传递给您的$scope.saveData函数。

$scope.saveData = function(){
  localStorage.setItem('data', $scope.table.rows);
}

但是，如果您更喜欢将表数据作为参数传递，它可能如下所示：

模板

<button class="btn btn-primary"
  type="button"
  ng-click = "saveData(table.rows)">
  Save changes
</button>

控制器

$scope.saveData = function(tableData){
  localStorage.setItem('data', tableData);
}

推荐阅读