动态创建 ng-model 值

Question

我正在构建一个债务合并计算器，它有两个表，允许用户添加和删除行。这些行包含 4 个不同值的输入：

代码插件： plnkr.co/edit/AS6M8zi3VrqKKgfTGwVT?p=preview

HTML

 .directive('cuDebtConsolidation',
    function() {
        return {
            restrict: 'E',
            scope: false,
            template: 
            '<div  id="debtConsolidationPrint">' +
            '<form name="debtConsolidationForm" role="form" data-toggle="validator" novalidate>' +
               '<div class="row mb-3 mt-5 mx-auto calcRow">' +
                    '<div class="col m-3">' +
                        '<div ng-repeat="table in tables">' +
                            '<h3 class="mt-4">{{table.name}}</h3>' +
                            '<table>' +
                                '<thead>' +
                                    '<tr>' +
                                        '<th>Loan Name</th>' +
                                        '<th>Remaining Balance</th>' +
                                        '<th>Monthly Payment</th>' +
                                        '<th>Loan Term</th>' +
                                    '</tr>' +
                                '</thead>' +
                                '<tbody>' +
                                    '<tr ng-repeat="(rowIndex, row) in table.rows" name="{{row.name}}">' +
                                        '<td><input class="form-control form-control-md text-transform-none" title="Please Enter loan name" maxlength="7" required type="text"></td>' +
                                        '<td><input class="form-control form-control-md text-transform-none" title="Please Enter remaining balance" maxlength="7" required type="number"></td>' +
                                        '<td><input class="form-control form-control-md text-transform-none" title="Please Enter Monthly Payment" maxlength="7" required type="number"></td>' +
                                        '<td><input class="form-control form-control-md text-transform-none" title="Please Enter loan term" maxlength="7" required type="number" ></td>' +
                                        '<td><input type="button" class="btn btn-round btn-sm btn-brand" value="Remove" ng-click="removeRow(rowIndex, table)"/></td>' +
                                    '</tr>' +
                                '</tbody>' +
                            '</table>' +
                            '<button class="btn btn-round btn-sm btn-brand mt-2" ng-click="addRow(table)">Add Row</button>' +
                        '</div>' +
                        '<div class="d-flex">' +
                            '<button class="btn btn-round btn-lg btn-brand d-block mt-2 w-100" ng-click="debtConsolidation();">Calculate!</button>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</form>' +
        '</div>'
        };
    });

控制器：

 $scope.tables=[{name: "Installment Table"}, {name: "Credit Card Table"}];

        $scope.tables[0].rows = [{name: "row1"}];
        $scope.tables[1].rows = [{name: "row1"}];

        $scope.counter = 2;

        $scope.addRow = function(table) {
            table.rows.push({ name: "row" + $scope.counter});

            $scope.counter++;
        };

        $scope.removeRow = function(rowIndex, table) {
            table.rows.splice(rowIndex, 1);
        };

        $scope.debtConsolidation = function() {
            console.log($scope.debtConsolidationForm);
        };

我使用 ng-repeat 遍历两个表，然后使用 ng-repeat 遍历行。这一切都在一个表单中，我尝试 ng-click="debtConsolidation();" 运行计算，但我似乎无法弄清楚如何绑定动态输入，然后才能使用每个动态行中的数据。

Answer 1

您可以为每个输入赋予一个 ng-model 属性。这将在您的 $scope.tables.rows 对象上放置一个 value 属性。

这是一个例子：

'<tbody>' +
   '<tr ng-repeat="(rowIndex, row) in table.rows" name="{{row.name}}">' +
      '<td><input ng-model="row.loanName" class="form-control form-control-md text-transform-none" title="Please Enter loan name" maxlength="7" required type="text"></td>' +
      '<td><input ng-model="row.remainingBalance" class="form-control form-control-md text-transform-none" title="Please Enter remaining balance" maxlength="7" required type="number"></td>' +
      '<td><input ng-model="row.monthlyPayment" class="form-control form-control-md text-transform-none" title="Please Enter Monthly Payment" maxlength="7" required type="number"></td>' +
      '<td><input ng-model="row.loanTerm" class="form-control form-control-md text-transform-none" title="Please Enter loan term" maxlength="7" required type="number" ></td>' +
      '<td><input type="button" class="btn btn-round btn-sm btn-brand" value="Remove" ng-click="removeRow(rowIndex, table)"/></td>' +
   '</tr>' +
'</tbody>'

并且如果你console.log对象在$scope.debtConsolidation函数中，你可以看到对象。

动态创建 ng-model 值

Dynamically creating ng-model values

angularjs

angularjs-directive

angularjs-scope