Динамическое создание значений ng-модели - PullRequest
Новая
       9

Динамическое создание значений ng-модели

0 голосов
/ 15 января 2019

Я строю калькулятор консолидации задолженности, который имеет две таблицы, которые позволяют пользователю добавлять и удалять строки. Строки содержат 4 ввода для разных значений:

код plunker: 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();" выполнить вычисления, но я не могу понять, как связать динамические входы, чтобы затем использовать данные из каждой динамической строки.

1 Ответ

0 голосов
/ 15 января 2019

Вы можете присвоить каждому входу атрибут ng-model. Это добавит свойство value к вашему $scope.tables.rows объекту.

Вот пример: 

'<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, вы можете увидеть объект.

...