AngularJS:从HTML表中读取Json数据

Question

在此处使用angularjs：

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

我在以下位置创建了一个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&注释列。我知道我在这里错过了一些东西，但不知道如何继续。

另一件目前不太重要的事情也是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&议论第1&第2列是动态的。

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

--更新相关代码---

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