如何在当前json数组angularjs中添加新的行数据

时间:2016-11-22 14:12:43

标签: javascript angularjs angularjs-directive angularjs-scope

我添加了新行,但我想在数据库中更新新行数据但是没有更新数据如何获取新行数据也添加地址json数组

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

        

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

    <div class="col-md-2">

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

  

enter image description here

1 个答案:

答案 0 :(得分:1)

在您的控制器中,创建一个计数器和一个数组。

$scope.i = 0;
$scope.array = [];

每次用户点击按钮时,都会向计数器添加一个并创建数组。

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

在你的html中,只需根据该计数器重复这些行。

<tr ng-repeat="lines in array">
    // Your tds
</tr>

编辑由于我无法理解您的英语,我会给您一个通用答案。

您的控制器必须有一个对象数组

$scope.i = 0;
$scope.array = [{
    id: 0, 
    address: 'address 1', 
    name: 'Jack Reacher'
}, {
    id: 1, 
    address: 'address 2', 
    name: 'Ethan Hawk'
}];
然后,您将稍微更改您的addRow功能。

$scope.addRow = function() {
    $scope.i++;
    $scope.array = [];
    for(var i = 0; i < $scope.i; i++) {
        $scope.array.push({
            id: null, 
            address: '', 
            name: ''
    });
    }
}

在你的HTML中你使用它。

<tr ng-repeat="object in array">
    <td>{{object.id}}</td>
    <td><input type="text" ng-model="object.address" /></td>
    <td><input type="text" ng-model="object.name" /></td>
</tr>

如果您想保存它,请使用$http请求。我会让你处理那部分。