Get Value of dynamically created table row value using angularjs

Question

I am a newbie in angularjs. I have a table and need to add some row dynamically. Everything working fine with a little of JQuery as well. But when I try to get value of dynamically created table row it's not working. My code is here. Please help.

<div ng-app="Myapp">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
    <script>
        var Myapp = angular.module('Myapp', ["ngRoute"]);
    </script>

    <div ng-controller="orderFormController">
        <table  id="item_table">
            <thead>
                <tr class="headings">
                    <th class="column-title">Item </th>            
                    <th class="column-title">Rate</th>                          

                    </th>

                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>         
                        <input type="text" name="item"  ng-model='item[0]'>
                    </td>

                    <td class=" "><input type="text" name="rate"  ng-model='rate[0]'> </td>
                    <td class=" "><a onclick="addrow()">add(+)</a> </td>
                </tr>

            </tbody>

        </table>
        <button type="button"  ng-click='saveorder()' >SAVE ORDER</button>
    </div>    
    <script>
        Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {
                var data = {};
                data['item'] = [];
                $scope.item = '';
                $scope.rate = '';
                $scope.saveorder = function () {
                    var row_count = $('#item_table tr').length;
                    for (i = 1; i <= row_count; i++) {
                        data['item'][i] = {'item': $scope.item[i], 'rate': $scope.rate[i]}

                    }
                    alert($scope.item[0]);
                    alert($scope.item[1]);
                }

            }]);
        function addrow() {
            var row = $('#item_table tr').length + 1;
            var row_string = '<tr><td><input type="text" name="item"  ng-model="item[' + row + ']"></td><td class=" "><input type="text" name="rate"  ng-model="rate['+ row +']"> </td><td class=" "><a onclick="addrow()">add(+)</a> </td></tr>';
            $('#item_table tbody').append(row_string);
        }
    </script>

this is not very angular like .. another way to achieve this is to use ng-repeat on your list of items "for r in rate".. when you add a row, simply append a new element to rate. you'll always have the reference to the row in "r" — MayK
– MayK, Commented Nov 20, 2015 at 6:15

Shardul Pendse · Accepted Answer · 2015-11-20 06:21:50Z

2

You can use ng-repeat directive for it. You can check the link. It might help you. In controller you can write like this to add a row.

  $scope.rows.forEach(function (row) {
        console.log('row #' + (index++) + ': ' + JSON.stringify(row));
    });

http://jsfiddle.net/shardulpendse/qbdrt00a/1/

answered Nov 20, 2015 at 6:21

Shardul Pendse

3042 gold badges4 silver badges17 bronze badges

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

Comments

ahmetugurbulut · Accepted Answer · 2015-11-20 06:12:49Z

2

I think you must use $compile after element.append.

You can try something like this:

var row = $('#item_table tr').length + 1;
var row_string = '<tr><td><input type="text" name="item"  ng-model="item[' + row + ']"></td><td class=" "><input type="text" name="rate"  ng-model="rate['+ row +']"> </td><td class=" "><a onclick="addrow()">add(+)</a> </td></tr>';

var newRow= angular.element(row_string);
$('#item_table tbody').append(newRow);
$compile(newRow )($scope);

answered Nov 20, 2015 at 6:12

ahmetugurbulut

1,60911 silver badges25 bronze badges

Comments

Sanjeev Kumar · Accepted Answer · 2015-11-20 06:12:09Z

0

To get the value of dynamically added row to a table, use :

$('table#item_table tbody').on('click', function(e){
       e.preventDefault();
       // select new row added by class or id
       do your stuff here...
    });

answered Nov 20, 2015 at 6:12

Sanjeev Kumar

4571 gold badge4 silver badges10 bronze badges

Comments

Rahul · Accepted Answer · 2015-11-20 06:13:36Z

0

There must be two change:

Move function addrow() in controller like

$scope.addrow = function(){ }

And call it using ng-click
Use $compile in append method like:

$('#item_table tbody').append($compile(row_string)($scope));

then try, it should work fine.

answered Nov 20, 2015 at 6:13

Rahul

3341 silver badge9 bronze badges

Collectives™ on Stack Overflow

Get Value of dynamically created table row value using angularjs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related