在编辑表列值时更新数组

时间:2017-03-16 09:30:44

标签: javascript html angularjs

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

在我的控制器中 -

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

所以,在这里我将第三个字段作为可编辑的。我能够编辑它但是当我发送该值时,它没有获取编辑的值,它采用该数组中的先前值。那么,如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

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