javascript - 当我们编辑表列值时更新数组

Question

我是angularjs的新手。我的 html 文件中有一个表格，就像

<table class="table table-striped table-bordered report-table" fixed-header>
                <thead class="text-center text-info">
                <th class="text-center">A</th>
                <th class="text-center">B</th>
                <th class="text-center">C</th>
                <th class="text-center">D</th>
                </thead>
                <tr ng-repeat="report in reports.data">
                  <td class="text-center">{{ report.attributes.a }}</td>
                  <td class="td-report-field">{{ report.attributes.b }}</td>
                  <td contenteditable = "true"><input type="checkbox" ng-if="report.attributes.c.length > 0 && showcheckbox" ng-bind="report.attributes.c" ng-click="getcheckedData(report.attributes.c)">{{ report.attributes.c }}</td>
                  <td class="text-center">{{ report.attributes.score }}</td>
                </tr>
              </table>

在我的 Controller 中 -

$scope.loadReports = function () {
                    $scope.loadingReports = true;
                    if($scope.documentType === "jobDescription"){
                        $scope.showcheckbox = false;
                        $scope.showSendButton = false;
                    }
                    uploadService.loadReports(uploadService.currentFileName, $scope.documentType)
                        .then(function (response) {
                            $scope.checkCandidateInfo();
                            $scope.reports = response;
                            $scope.loadingReports = false;
                        },
                        function (error) {
                            $scope.loadingReports = false;
                            $scope.errorMessage = error.status + " : " + error.statusText;
                            if (error.status === 401) {
                                loginService.authenticationError();
                            }
                        });
                };

我的服务 -

loadReports : function(fileName, docType) {
                    var url = 'rez' + '/reports/' + docType + '/' + fileName;
                    var config = {};
                    config.headers = {
                        "X-AUTH-TOKEN": loginService.getAuthToken()
                    };
                    return $http.get(url, config)
                      .then(function(response){
                          return response.data;
                      },
                      function(error){
                          $log.error(error);
                          return $q.reject(error);
                      });
                },

$scope.getcheckedData = function(SelectedVal) {     
                    if($.inArray(SelectedVal , messages) === -1) {
                          messages.push(SelectedVal);
                    } else {
                          var index = messages.indexOf(SelectedVal);
                          messages.splice(index, 1);
                    }
                        if(messages.length > 0) {
                            $scope.sendButtondisable = false;
                        }else {
                            $scope.sendButtondisable = true;
                        }  
                        return messages;      
                };

loadReports 调用自 -

$scope.tabSelected = function (selectedTab) {
                    if (selectedTab.id === "report-score") {
                        $scope.showSaveButton = false;
                        $scope.loadReports();
                    }
                };

所以，在这里我将第三个字段设置为可编辑。我可以编辑它，但是当我发送该值时，它不会采用编辑后的值，而是采用该数组中的先前值。那么，如何解决这个问题呢？

Answer 1

尝试将 ng-model="reports" 添加到您的 contenteditable td 或类似的内容(我不知道，您在编辑什么)。您只需将其绑定(bind)到正确的作用域变量即可。