javascript - AngularJS:从 HTML 表中读取 Json 数据

Question

在这里使用angularjs:

我正在创建一个包含 2 个静态列(ID 和评论)的表，其余列是通过单击按钮动态创建的。用户可以在此表的行中输入数据。我想从用户输入的表中读取/提取数据。

我在以下位置创建了一个 jsfiddle:http://jsfiddle.net/ajnh8bo5/7/

点击添加标签，给一个名字，然后点击添加列

读取 json 为:

  $scope.read = function() {
    return JSON.stringify($scope.targetTable);
  };

目前我生成的 json 只提供有关添加的动态列的信息。请参阅下面的 json:

  {
    "id":0,
    "name":"Table 1",
    "columns":[
   {
    "id":0,
    "label":"Column 0",
    "$$hashKey":"object:11"
   }
    ],
"rows":[
 {
   "0":"2",
   "$$hashKey":"object:9",
   "undefined":"1",
   "id":1037
 }]

上面的 json 是在我只添加一个动态列时生成的。在行数组“0”下:“2”表示第一个动态列的值为“2”。但它不显示为 ID & Comment 列输入的数据。我知道我在这里遗漏了一些东西，但不确定如何继续。

此刻不太重要的另一件事也是吐出列名的 json。

---更新---

添加所需的输出:

{
  "columns": [
    {
      "id": 0,
      "label": "ID"
    },
    {
      "id": 1,
      "label": "Column 1"
    },
    {
      "id": 2,
      "label": "Column 2"
    },
    {
      "id": 4,
      "label": "Comment"
    }
  ],
  "rows": [
    {
      "Id": "1",
      "Column 1": "2",
      "Column 2": "3",
      "Comment": "user comment"
    }
  ]
}

上面的 json 显示我有 2 个静态列 Id 和 Comment。 Column1 和 Column2 是动态的。

如果有人不能为我提供基于上述 JSON 的任何解决方案。谁能告诉我如何在我的 json 中输出静态列 ID 和评论。

--更新相关代码---

下面是 HTML 表格:

<table class="table table-bordered" ng-if="targetTable">
        <thead>
          <tr>
            <th>ID #</th>
            <th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
              <th class="comment-fixed-width" ng-model="comment">Comment</th>
            <td class="center add-column fixed-width"><a ng-href ng-click="addColumn()">+ Add Column</a></td>
              <td class="comment-fixed-width" contenteditable="true" ></td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="r in targetTable.rows">
            <td class="fixed-width" contenteditable="true" ng-model="r[column.id]"></td>
            <td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined"></td>
             <td class="comment-fixed-width" contenteditable="true" ></td>
                                    <td class="blank fixed-width" colspan="2" ng-model="r[column.id]"></td>
          </tr>
        </tbody>
      </table>

AngularJs 代码:

function createTable() {
tableCounter++;
return {
  id: currentTableId++,
  name: `Table ${currentTableId}`,
  columns: [],
  rows: [{}],
  uniqueIdCounter: 1037
}

在创建新选项卡时，我创建了一个表实例:

   $scope.tables.push(createTable());

$scope.tables = [];
$scope.targetTable = null;

//When I click add dynamic column button I use the below code.
$scope.addColumn = function() {
if (tableCounter) {
  var columns = $scope.targetTable.columns,
    id = columns.length;
  $scope.targetTable.columns.push({
    id: columns.length,
    label: `Column ${id}`
   });
  }
};

 //Below code is for adding a new row
  $scope.addNewRow = function(value, row) {
  if (tableCounter) {
  if (!value || value === "" || typeof value !== 'string') return;
  $scope.targetTable.rows.push({});
   row.id = $scope.targetTable.uniqueIdCounter++;
  }
};

有人有意见吗？

Answer 1

我不想彻底修改你的代码，所以我只是对你的 HTML 代码做了一些小的调整:

JSFiddle:http://jsfiddle.net/0oerpd5u/

     <tbody>
         <tr ng-repeat="r in targetTable.rows">
            <td class="fixed-width" contenteditable="true" ng-model="r.id"></td>
            <td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!targetTable.rows[$index+1].id? addNewRow(r[column.id], r): ''"></td>
             <td class="comment-fixed-width" contenteditable="true"  ng-blur="!targetTable.rows[$index+1].id?addNewRow(r.comment, r):''" ng-model="r.comment">></td>
             <td class="blank fixed-width" colspan="2" ng-model="r[column.id]"></td>
         </tr>
     </tbody>

在你的 JS 中:

  var uniqueIdCounter =1037;
  function createTable() {
    tableCounter++;
    return {
      id: currentTableId++,
      name: `Table ${currentTableId}`,
      columns: [],
      rows: [{id: uniqueIdCounter}],
      uniqueIdCounter: uniqueIdCounter
    }
  }
  $scope.addNewRow = function(value, row) {
    if (tableCounter) {
      if (!value || value === "" || typeof value !== 'string') return;
      $scope.targetTable.rows.push({id :++$scope.targetTable.uniqueIdCounter});
    }
  };