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>                 

Answer 1

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/

Answer 2

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.

Answer 3

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

Answer 4

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