Update record into current json array angularjs

Question

I want to update new row data in my current Address Array but its not updating, See below images, I am new in Angular, add other object of array see last image

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

Code Snippet for Adding new row in Address Array:

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

Code Snippet for Updating Textbox values into database:

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

In Below Picture I click button (+) to generate new row with empty textfields:

After row appears, I enter some data:

When i Click Update button yellow highlighted new row data does not save, it shows old records after i refresh my page

My question in Simple. How to update the Address array with new row ?

Answer 1

If I am understanding you correctly, you just need to push the new data into your existing array like below:

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

add $scope.form = {} to your controller to collect the new row, and change your model on the new row to "form." + the column name like below:

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

Mind you, you will have to do much more to actually permanently add it to your database.

Here is a Plunker