Как добавить строку динамически, используя угловые js в таблице?

Question

Как добавить строку динамически, используя AngularJS в таблице, которая содержит данные из запроса на получение?

Я написал код, например:

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

теперь использует угловые JS, как я могу добавить строку по нажатию кнопки или запрос получите в той же таблице ...?

я написал скрипт, который did'nt работать скрипт выглядит следующим образом ..

$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: Unexpected end of input

angular.min1.5.9.js:6 Uncaught Error: [$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> 

Ваш соответствующий Угловой шрифт w ульд выглядеть примерно так:

<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 вы могли бы подтолкнуть их к списку (или CONCAT существующего списка, или что подходит для вашего случая)

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

Угловое имеет привязку с 2-сторонними данными, поэтому, если он видит, что список резервных копий изменился (например, добавив дополнительные автомобили в список), он будет динамически обновлять таблицу.

Answer 2

Я создал JS скрипку Это, пожалуйста, обратитесь его Refer This Example В 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>