javascript - 将记录更新到当前json数组中

Question

我想更新当前地址数组中的新行数据，但它没有更新， 请参见下图，我是 Angular 的新手，添加数组的其他对象请参见最后一张图片

<tbody class="gradeX">
                <tr  ng-repeat="x in Profile.addresses">
                <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.site_name ' name='site_name'></td>
                <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.street_address ' name='street_address'></td>
                <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.city ' name='city'></td>
                <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.state ' name='state'></td>
                <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.country ' name='country'></td>
                <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.zip_code ' name='zip_code'></td>
                <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.phone_number ' name='phone_number'></td>

                <tr ng-repeat="lines in array">
                        <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.site_name ' name='site_name'></td>
                        <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.street_address ' name='street_address'></td>
                        <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.city ' name='city'></td>
                        <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.state ' name='state'></td>
                        <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.country ' name='country'></td>
                        <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.zip_code ' name='zip_code'></td>
                        <td><input type="text" class="form-control" id="inputDefault"  ng-model='x.phone_number ' name='phone_number'></td>

                                            </tr>
                                            </tr>

                                        </tbody>
<a href="" data-toggle="tooltip" title="Add Address" ng-click="addRow()"><i class="fa fa-plus fa-2x cust_primary" aria-hidden="true"></i></a>

在地址数组中添加新行的代码片段:

      $scope.i = 0;
    $scope.array = [];
       $scope.addRow = function() {
        $scope.i++;
        $scope.array = [];
        for(var i = 0; i < $scope.i; i++) {
            $scope.array.push(i);
        }
    }

用于将文本框值更新到数据库的代码片段:

      $scope.updateProfile = function () {       

            $scope.tempObject={full_name:$scope.Profile.full_name,
              mobile_number:$scope.Profile.mobile_number,
             company_name:$scope.Profile.company_name,
             designation: $scope.Profile.designation,    
            addresses: $scope.Profile.addresses,
            payment_info: $scope.Profile.payment_info

           };  

   addresses: $scope.Profile.addresses,

在下图中，我单击按钮 (+) 生成带有空文本字段的新行:

出现行后，我输入一些数据:

当我单击“更新”按钮时，黄色突出显示的新行数据不会保存，刷新页面后它会显示旧记录

我的问题很简单。如何用新行更新地址数组？

Answer 1

如果我理解正确，您只需将新数据推送到现有数组中，如下所示:

$scope.updateProfile = function(){
$scope.addresses.push($scope.form)
$scope.form = {};
$scope.i = 0;
}

将 $scope.form = {} 添加到您的 Controller 以收集新行，并将新行上的模型更改为“form”。 + 列名称如下:

  <td><input type="text" class="form-control" id="inputDefault"  ng-model='form.site_name ' ></td>
                                            <td><input type="text" class="form-control" id="inputDefault"  ng-model='form.street_address ' ></td>
                                            <td><input type="text" class="form-control" id="inputDefault"  ng-model='form.city '></td>
                                            <td><input type="text" class="form-control" id="inputDefault"  ng-model='form.state ' ></td>
                                            <td><input type="text" class="form-control" id="inputDefault"  ng-model='form.country ' ></td>
                                            <td><input type="text" class="form-control" id="inputDefault"  ng-model='form.zip_code ' td>
                                            <td><input type="text" class="form-control" id="inputDefault"  ng-model='form.phone_number '></td>

请注意，您需要做更多的工作才能将其永久添加到数据库中。

这是一个Plunker