Dynamically creating ng-model values

Question

I am building out a debt consolidation calculator that has two tables that allows the user to add and remove rows. The rows contain 4 inputs for different values:

code 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>'
        };
    });

Controller:

 $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);
        };

I use ng-repeat to loop over the two tables and then ng-repeat to loop over the rows. This is all within a form, I'm try to ng-click="debtConsolidation();" run calculations but i cant seem to figure out how to bind the dynamic inputs to then be able to use the data from each dynamic row.

Answer 1

You can give each input an ng-model attribute. This will put a value property on your $scope.tables.rows object.

Here's an example:

'<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>'

And if you console.log the object in the $scope.debtConsolidation function, you can see the object.