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

我认为你必须在element.append之后使用$ compile。

您可以尝试这样的事情：

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 2

您可以使用ng-repeat指令。你可以查看链接。它可能对你有帮助。在控制器中，您可以这样写以添加行。

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

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

Answer 3

要获取动态添加的行的值，请使用：

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

Answer 4

必须有两处改变：

在控制器中移动函数addrow（），如

$ scope.addrow = function（）{ }

使用ng-click
在append方法中使用$ compile，如：

$（'＃item_table tbody'）。append（$ compile（row_string）（$ scope））;

然后尝试，它应该可以正常工作。

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

4 个答案: