How to capture ng-model data with same names from table rows in angularjs?

Question

I have created an item table which can be dynamically increased on click of 'Add New Item'. On submission I want to capture all items(rows) info for sending it to REST service.

However in my angulajs controller, I can get only the first item (first table row) even though there are multiple rows created by clicking on 'Add New Item'.

My code:

<button id="btnAddNewItem">Add Item</button>
<table id="InputTable" border="0" cellpadding="0" cellspacing="0">
    <thead><tr><th>Item Name</th>
    <th>COD</th>
    <th>EOT</th>
   </tr></thead>
<tbody><tr>
    <td><input type="text" ng-model="item.name"></td>
    <td><input type="text" ng-model="item.COD"></td>
    <td><input type="text" ng-model="item.EOT" id=></td>
    <tr>
 <tbody>
</table>

Logic when click on new item:

 function btnAddNewItem(){
        $("#InputTable tr:last").after(
                "<tr>"+
                "<td><input type='text' ng-model='item.name'></td>"+
                "<td><input type='text' ng-model='item.COD'></td>"+
                "<td><input type='text' ng-model='item.EOT'></td>"+
                "<td><img src='images/delete.png' class='btnExcluir'/></td>"+
        "</tr>");
        return false;
    };

angularjs code is here to get items data. This shows only the first row even multiple rows exist.

var myModule = angular.module('MyApp',[]);
myModule.controller('MyCtrl', function($scope, $http) {
    $scope.items[];
    $scope.simulate = function(item) {
        $scope.items.push(item);
        alert($scope.items.length); --returns 1
    };
    });

I am actually binding all rows to same ng-model name.

Do we need to maintain unique ng-model names for each row column?

Please read this question / answer first. You will save yourself a lot of headache in the future — New Dev
– New Dev, Commented May 9, 2015 at 19:26
This question has a great answer: stackoverflow.com/questions/21427089/… — jme11
– jme11, Commented May 9, 2015 at 19:48

New Dev · Accepted Answer · 2015-05-09 19:26:52Z

2

You need to use the $compiler service or.. ngRepeat which is what i would use if I were you.

<button ng-click="addNewItem()">Add Item</button>
<table id="InputTable" border="0" cellpadding="0" cellspacing="0">
    <thead><tr><th>Item Name</th>
    <th>COD</th>
    <th>EOT</th>
   </tr></thead>
<tbody><tr ng-repeat="item in items">
    <td><input type="text" ng-model="item.name"></td>
    <td><input type="text" ng-model="item.COD"></td>
    <td><input type="text" ng-model="item.EOT" id=></td>
    <tr>
 <tbody>
</table>



var myModule = angular.module('MyApp',[]);
myModule.controller('MyCtrl', function($scope, $http) {
    $scope.items = [];
    $scope.addNewItem = function() {
        $scope.items.push({});
    };
});

edited May 9, 2015 at 19:26

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

answered May 9, 2015 at 19:23

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

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

1 Comment

janasainik Over a year ago

Yes, I should use ng-repeat to get array of all rows! Thanks!

Collectives™ on Stack Overflow

How to capture ng-model data with same names from table rows in angularjs?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related