How do I add a row dynamically using angular js in a table?

Question

How do I add a row dynamically using AngularJS in a table, which contains data from a get request?

I have written a code as such:

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

now using angular js how can i add a row on click of a button or a get request in the same table...?

i had written a script which did'nt work the script is as follows..

$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);                 
                });

I get error such as :

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

You probably want to bind your table to a backing list and use ng-repeat to build up your table dynamically:

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

Your corresponding Angular script would look something like:

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

Or if you want to add cars whenever you get an ajax response you could push them to a list (or concat the existing list, or whatever fits your case)

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

Angular has 2-way data binding, so if it sees that the backing list changed (eg by adding extra cars in the list), it will update your table dynamically.

Answer 2

I have created A JS Fiddle For This please Refer it Refer This Example In JS

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

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

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