JavaScript/ AngularJS: 仅当我点击按钮两次时才会显示错误消息

Question

我有一个 angularJS 视图，允许用户上传 Excel 数据并将其导入 SQL 服务器 table。

我添加了数据的客户端验证，但仅当我再次单击 Upload/Import 按钮时才会显示错误消息。我不确定我的代码中的哪一部分导致了这个问题。

是否可以寻求帮助来解决这个问题？我想我可能需要移动 $scope.Message 变量赋值的位置，但是在哪里？

我包括 Javascript/angularjs 代码和 html 视图。

AngularJS

//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);
};

HTML 查看

<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>

Answer 1

$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();
 }

JavaScript/ AngularJS: 仅当我点击按钮两次时才会显示错误消息

JavaScript/ AngularJS: Error Message displays only when I click twice the button

html

javascript

import-from-excel

dom-events

angularjs