我的问题与 AngularJS 有关。我在表行中显示 JSON 数据。我的问题是，我在控制器的方法（
$scope.save(arg)$scope.export(arg)$scope.save(arg)$scope.export(arg)$scope.export(arg)$scope.padas[]到目前为止我所尝试的内容可以在下面以及 jsfiddle 上找到。感谢解决问题的宝贵指导。
HTML
<body layout="row" ng-app="mainApp" ng-controller="mainCtrl" ng-cloak>
<main layout="column" flex aria-hidden="false">
<md-content ng-ref="container" md-scroll-y flex>
<md-subheader>
<div layout=row layout-align="space-around center">
<md-icon class="material-icons" ng-init="editMode=false" ng-click="editMode=!editMode">
edit
</md-icon>
<!-- problem -->
<md-icon class="material-icons" ng-click="save(oPada)">save</md-icon>
<md-icon class="material-icons" ng-click="export(oPada)">download</md-icon>
<!-- problem -->
<md-icon class="material-icons">swipe</md-icon>
</div>
</md-subheader>
<div contenteditable="{{editMode}}">
<div class="padaBody">
<table class="padaLyrics">
<tr ng-repeat="line in oPada.lyrics track by $index">
<td>{{line}}</td>
</tr>
</table>
</div>
</div>
</md-content>
</main>
</body>
JavaScript
angular.module('mainApp', ['ngMaterial']);
angular.module('mainApp')
.controller('mainCtrl', function($scope, $sce, $http, $window) {
$scope.padas = [{
"padaID": 730,
"title": "What is Lorem Ipsum",
"lyrics": [
"Lorem Ipsum is simply dummy text",
"of the printing and typesetting",
"industry. Lorem Ipsum has been",
"the industry's standard dummy",
]
},
{
"padaID": 735,
"title": "Why do we use it",
"lyrics": [
"It is a long established fact that",
"a reader will be distracted by the",
"readable content of a page",
"when looking at its layout."
]
}
];
$scope.oPada = $scope.padas[0];
// Save array as JSON file with data changes
$scope.save = function(objectToSave) {
if (!objectToSave) {
return;
}
// save edited data to json
$http.put('data/pada.json', objectToSave).then(
function(response) {
$scope.editMode = false;
// find edited pada by id in padas array
const idx = $scope.padas.findIndex(o => o.padaID === response.data.padaID);
// replace dound pada in array with edited pada(response.data)
$scope.padas.splice(idx, 1, response.data);
},
function(response) {}
);
};
// Export data changes to save in file.
$scope.export = function(objectToExport) {
objectToExport = objectToExport || {
string: "empty",
number: 2
};
const pada = objectToExport.title ?
objectToExport.title.replace(/ /g, '_') :
objectToExport.padaID ?
'PadaID_' + objectToExport.padaID.toString().padStart(3, '0') :
'PadaID_000';
const filename = pada + '.json';
var blob = new Blob([angular.toJson(objectToExport, true)], {
type: 'text/text'
});
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, filename);
} else {
var e = document.createEvent('MouseEvents'),
a = document.createElement('a');
a.download = filename;
a.href = window.URL.createObjectURL(blob);
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
}
};
});
尝试使用正确的输入元素，例如
textareacontenteditableng-model例如，代替这个
<div contenteditable="{{editMode}}">
<div class="padaBody">
<table class="padaLyrics">
<tr ng-repeat="line in oPada.lyrics track by $index">
<td>{{line}}</td>
</tr>
</table>
</div>
</div>
尝试使用 ng-model 来正确更新底层数据。
<textarea aria-label="label" ng-model="oPada.lyrics[0]"></textarea>
不过，您需要为多行输入提供一个新的解决方案，因为这是用于输入/编辑单个文本块，而不是像您那样的数组。这就是为什么为了演示，我只将第一首歌词绑定到文本区域（
oPada.lyrics[0]