如何在表格中使用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>