如何在表格中使用angular js动态添加行？

Question

如何在表中使用AngularJS动态添加一行，其中包含来自get请求的数据？

我已经写了这样的代码：

<table id="tableRow" class="table table-bordered tableRow">
    <thead>
        <tr>
            <th></th>
            <th>
                <label>Make</label>
            </th>
            <th>
                <label>Vin</label>
            </th>
            <th>
                <label>Model</label>
            </th>
            <th>
                <label>Parts</label>
            </th>
            <th>
                <label></label>
            </th>
            <th>
                <label></label>
            </th>
        </tr>
     <thead>
   </table>

现在使用angular js如何在同一表中单击按钮或获取请求时添加一行...？

我写了一个不起作用的脚本，脚本如下。

$scope.myGet = function() {
                $http.get("http://172.17.133.82:8080/restproj/v1/dealer")
                    .then(function(response) {
                    $scope.addRow = response.data;
                    var tall = '';
                    tall += '<tr>'+
                        '<td><button class="btn btn-danger btn-remove" type="button"><i class="glyphicon glyphicon-trash gs"></i></button</td>' +
                        '<td><input type="text" class="form-control" id="makeid"  ng-model="addRow.make"></td>' +  
                        '<td><input type="text" class="form-control" id="vinid" ng-model="addRow.vin"></td>'+
                        '<td><input type="text" class="form-control" id="modalid" ng-model="addRow.model"></td>' + 
                        '<td ng-repeat="part in addRow.parts"><input type="text" class="form-control" id="partsid" ng-model="addRow.name"><input type="text" class="form-control" id="partsid" ng-model="addRow.desc"></td>' + 
                        '</tr>';

                    $('#tableROW').append(tall);                 
                });

我收到如下错误：

tabelform.html：320 Uncaught SyntaxError：输入意外结束

angular.min1.5.9.js：6未捕获的错误：[$ injector：modulerr] http://errors.angularjs.org/1.5.9/ $ injector / modulerr？p0 = myApp＆p1 = Error％3A％2…Ic％20 （http％3A％2F％2F127.0.0.1％3A63139％2Fjs％2Fangular.min1.5.9.js％3A21％3A332）（…）

Answer 1

您可能希望将表绑定到后备列表，并使用ng-repeat动态建立表：

<div ng-app="myApp" ng-controller="carCtrl"> 

<table>
  <tr ng-repeat="car in cars">
    <td>{{ car.make }}</td>
    <td>{{ car.vin }}</td>
    <td>{{ car.model }}</td>
  </tr>
</table>

</div>

您相应的Angular脚本如下所示：

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

    $http.get("http://172.17.133.82:8080/restproj/v1/dealer")
         .then(function (response) {
           $scope.cars = response.data.records;
           });

    });

</script>

或者，如果您希望在收到ajax响应时添加汽车，则可以将其推送到列表中（或合并现有列表，或适合您的情况）

$scope.cars.push(response.data.records)

Angular具有2向数据绑定，因此，如果看到后备列表已更改（例如，通过在列表中添加额外的汽车），它将动态更新您的表。

Answer 2

我为此创建了一个JS小提琴，请参考JS中的此示例

 var httpRequest = $http({
        method: 'POST',
        url: '/echo/json/',
        data: mockDataForThisTest()

    }).success(function(data, status) {
      $scope.people= $scope.people.concat(data);
    });

在HTML中<div ng-app="myApp"> <div ng-controller="PeopleCtrl"> <p> Click <a ng-click="loadPeople()">here</a> to load more data.</p> <table> <tr> <th>Id</th> <th>First Name</th> <th>Last Name</th> </tr> <tr ng-repeat="person in people"> <td>{{person.id}}</td> <td>{{person.firstName}}</td> <td>{{person.lastName}}</td> </tr> </table> </div> </div>