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)(…)

You are trying to inject a module that doesn't exist (or isn't loaded) into your app. Try to post your app/controller definition — Luca De Nardi
– Luca De Nardi, Commented Dec 1, 2016 at 12:53
You shouldn't inject html code from a controller (try to do it without jQuery) — Endless
– Endless, Commented Dec 1, 2016 at 12:54
btw, you have forgot to close <thead> you have two thead's now in your table — Endless
– Endless, Commented Dec 1, 2016 at 12:56

Nick Vanderhoven · Accepted Answer · 2016-12-01 12:54:45Z

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 (e.g. by adding extra cars in the list), it will update your table dynamically.

answered Dec 1, 2016 at 12:54

Nick Vanderhoven

3,09320 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ryan Pereira Over a year ago

i need to add a new input filed row in the table

Nick Vanderhoven Over a year ago

You can just put the input field in it: <input type="text" class="form-control" id="makeid" ng-model="{{car.make}}">

Nick Vanderhoven Over a year ago

if you want to hide the input field when there is no data, you can always just use ng-hide or ng-show to hide empty input fields

sriam980980 · Accepted Answer · 2016-12-01 13:07:15Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related