javascript - 使用angularjs获取动态创建的表行值的值

Question

我是angularjs的新手。我有一个表，需要动态添加一些行。一点点 JQuery 也能正常工作。但是当我尝试获取动态创建的表行的值时，它不起作用。我的代码在这里。请帮忙。

<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

你可以为它使用 ng-repeat 指令。您可以查看链接。它可能对你有帮助。在 Controller 中你可以这样写来添加一行。

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

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