AngularJS:从HTML表读取JSON数据

在这里使用AngularJS:

我正在创建一个表,其中有两个静态列(id&comment),其余列是通过单击按钮动态创建的。用户可以在此表的行中输入数据。我想从用户输入的表中读取/提取数据。

我创建了一个jsiddle,位于: 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显示我有两个静态列id&comment。第1列和第2列是动态的。

如果有人不能提供基于上述JSON的任何解决方案。任何人都能告诉我如何在JSON中输出静态列id&comment吗?

--更新相关代码---

下面是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++;
  }
};

有人有意见吗?