get value of textfield in a table using angularjs

Question

Below is my angularjs form

<div ng-app="Myapp">
    <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>         
                        <select name="item"  ng-model="item" >
                            <option value="">Choose..</option>
                            <option value="T-SHIRT">T-SHIRT</option>
                            <option value="JACKET">JACKET</option>

                        </select>
                    </td>

                    <td class=" "><input type="text" name="rate"  ng-model='rate'> </td>

                </tr>
                <tr>
                    <td>         
                        <select name="item1"  ng-model="item1" >
                            <option value="">Choose..</option>
                            <option value="T-SHIRT">T-SHIRT</option>
                            <option value="JACKET">JACKET</option>

                        </select>
                    </td>

                    <td class=" "><input type="text" name="rate1"  ng-model='rate1'> </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.saveorder = function () {
                var rowCount = $('#item_table tr').length;
                for (i = 1; i < rowCount; i++) {
                    data['item'][i] = {'item': $scope.item + i, 'rate': $scope.rate + i}
                    //data['item'][i] = {'item': $scope.item,  'rate': $scope.rate}
                }
            }

        });
    </script>

Here in this above for loop the second commended line is working and it returns value of item, But I want to get all items value in table. When I use item+i in loop it returns a null value means its not working like $scope.item1,$scope.item2 etc. I am new to angularJs any help? thanks in advance

ranakrunal9 · Accepted Answer · 2015-11-18 09:36:51Z

1

Try by changing your column and type name to use like order_no[0], order_no1, etc.. and type[0], type1, etc.. and check with code below :

var rowCount = $('#item_table tr').length;
for (i = 0; i < rowCount; i++) {
    order_no[i] =  $scope.order_no[i];
    type[i] =  $scope.type[i];
}

You can check fiddle https://jsfiddle.net/qh73ogzw/30 to check changed example as per your code

edited Nov 18, 2015 at 9:36

answered Nov 18, 2015 at 5:24

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

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

3 Comments

nervartha Over a year ago

Tried, But it returns first letter of order_no, type etc

nervartha Over a year ago

I changed question with my actual scenario, Thanks for help

nervartha Over a year ago

Thanks @ranakrunal9 its working. But problem is with dynamically generated rows. How can I get value of such rows?

Collectives™ on Stack Overflow

get value of textfield in a table using angularjs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related