JavaScript/AngularJS：仅当我单击两次按钮时才会显示错误消息
我有一个angularJS视图，允许用户上传Excel数据并将其导入SQL server表 我添加了数据的客户端验证，但只有在第二次单击“上载/导入”按钮时才会显示错误消息。我不确定代码中的哪个部分导致了此问题 有没有可能寻求帮助来解决这个问题？ 我想我可能需要移动$scope.Message变量赋值的位置，但是在哪里呢 我包括Javascript/angularjs代码和html视图 安格拉斯JavaScript/AngularJS：仅当我单击两次按钮时才会显示错误消息,javascript,html,angularjs,dom-events,import-from-excel,Javascript,Html,Angularjs,Dom Events,Import From Excel,我有一个angularJS视图，允许用户上传Excel数据并将其导入SQL server表 我添加了数据的客户端验证，但只有在第二次单击“上载/导入”按钮时才会显示错误消息。我不确定代码中的哪个部分导致了此问题 有没有可能寻求帮助来解决这个问题？ 我想我可能需要移动$scope.Message变量赋值的位置，但是在哪里呢 我包括Javascript/angularjs代码和html视图 安格拉斯 //Parse Excel Data $scope.ParseExcelDataAndSave
//Parse Excel Data
$scope.ParseExcelDataAndSave = function () {
var file = $scope.SelectedFileForUpload;
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
var filename = file.name;
// pre-process data
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
// call 'xlsx' to read the file
var data = e.target.result;
var workbook = XLSX.read(binary, { type: 'binary', cellDates: true, cellStyles: true });
var sheetName = workbook.SheetNames[0];
var excelData = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
exceljsonObj = excelData;
var errors = [];
var rowCounter = 1;
for (var j = 0; j < exceljsonObj.length; j++) {
var xdata = exceljsonObj[j];
if (xdata['Meeting ID'] === undefined || xdata['MeetingID'] === undefined) {
errors.push('Row: ' + rowCounter + ' is missing the Meeting ID value.' +
' Please, verify that the data you are trying to upload meets the required criteria, ' +
'and then try to upload your file again.');
}
else if ((xdata['Legistar Id'].toUpperCase() === undefined || xdata['LegistarID'].toUpperCase() === undefined) &
(xdata['Agenda Item'].toUpperCase() === undefined ||xdata['AgendaItem'].toUpperCase() === undefined)) {
errors.push('Row: ' + rowCounter + ' Meeting has no Legistar ID and no Agenda Item. Please check data.');
}
rowCounter++;
}
if (errors.length > 0) {
$scope.Message = 'Please, verify that the file you are trying to upload is correctly formatted, \n ' +
'and that the data it contains, meets the expected criteria, then click the upload button again. \n Thank you!'
}
else {
// Save data
$scope.SaveData(excelData);
}
};
}
reader.onerror = function (ex) {
console.log(ex);
};
reader.readAsArrayBuffer(file);
};
<body ng-app="MyApp">
<div class="container py-4" ng-controller="MyController">
<div class="card">
<div class="card-header bg-primary text-white">
<h5>Cross Reference List</h5>
</div>
<div class="card-body">
@* Upload Button *@
<button style="margin-bottom:10px;" type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#myModal">
<i class="far fa-file-excel"></i> Upload Excel File
</button>
@* Modal Window *@
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Upload Cross-Reference List</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="input-group">
<div class="custom-file">
<input type="file" name="file" class="custom-file-input" onchange="angular.element(this).scope().UploadFile(this.files)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" ng-disabled="!SelectedFileForUpload" ng-click="ParseExcelDataAndSave()" /><i class="fa fa-upload"></i> Upload
</div>
</div>
<span class="text-success">
{{Message}}
</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger rounded-0" data-dismiss="modal" ng-click="clearText()" />Close
</div>
</div>
</div>
</div>
@* Main Table *@
<table id="dataTable" class="table table-bordered table-striped" ;>
<thead>
<tr>
<th style="width: 90px;">Meeting ID</th>
<th style="width: 105px;">Agenda Item</th>
<th style="width: 85px;">Legistar ID</th>
<th>Title</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
$scope摘要一期。分配$scope.Message后调用$scope.apply
if (errors.length > 0) {
$scope.Message = 'Please, verify that the file you are trying to upload is correctly formatted, \n ' +
'and that the data it contains, meets the expected criteria, then click the upload button again. \n Thank you!'
$scope.$apply();
}
尝试添加$scope。$apply在分配$scope.MessageAgreed@tbone849后，可能会出现范围摘要问题。作为一个小技巧，您可以尝试使用$timeout服务在下一个摘要周期$timeoutfunction中获取它{$scope.Message='请验证您尝试上载的文件格式是否正确，\n'+'以及它包含的数据是否符合预期标准，然后再次单击上载按钮。\n谢谢！'，100您好，谢谢你们两位的建议。我将尝试每种方法，看看是否有效，我希望可以。完成后，我会尽快通知您，并向您展示如何应用此想法。再次感谢。@tbone849，我是添加$scope。$apply还是必须将消息包装在匿名函数中？我不确定如何使用它。Thanks。你可以做任何一个。要么在后面添加，要么包装。两者都可以。