Dynamically add new ng-model to angularJS

Question

I have a simple form which has two text boxes, the values typed into the boxes are displayed in a div using angularJS. I also have a button which adds a new row of two text boxes to the form using jQuery, this also gives them their ng-model.

However these new text boxes don't work for assigning the values to the div. Is there a way that I can dynamically add more rows to this table and have them work?

HTML:

<table>
    <tr>
        <td><input type="text" ng-model="value1a"></td>
        <td><input type="text" ng-model="value1b"></td>
    </tr>
</table>

<input type="button" value="Add Row" name="addRow">

<div>
    <p>{{value1a}} {{value1b}}</p>
</div>

jquery:

$(document).ready(function() {
    var count = 2;

    $('[name="addRow"]').click(function() {
        $('.table tr:last').after('<tr></tr>');
        $('.table tr:last').append('<td><input type="text" ng-model="value' + count + 'a"></td>');
        $('.table tr:last').append('<td><input type="text" ng-model="value' + count + 'b"></td>');

        $('.div').append('<p>{{value' + count + 'a}} {{value' + count +'b}}</p>');

        count++;
    });
});

I know the reason is probably because the ng-model needed to be available from the start of the page load for it to work, but how can I add new rows like this?

Angular + jQuery = YURGH. Use Angular, OR use jQuery, not both. Angular generates the DOM on the fly, whereas jQuery manipulates it, they're completely different techniques. By mixing up those two technologies, you create clumsy, complex and unmaintainable code, not to mention that you must load two libraries instead of one. — Jeremy Thille, Aug 02 '17 at 15:20
This is simply not how you do things in angular. Get rid of the jQuery or get rid of angular. Strongly suggest reading [“Thinking in AngularJS” if I have a jQuery background?](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1) — charlietfl, Aug 02 '17 at 15:21
If you want to use angular you should be adding rows by using ng-repeat and pushing objects into your scope model — charlietfl, Aug 02 '17 at 15:23

georgeawg · Accepted Answer · 2017-08-03T09:07:23.280

Instead of using jQuery, use the ng-repeat directive to add rows as defined by the Model:

angular.module("app",[])
.controller("ctrl", function($scope) {
    var vm = $scope;
    vm.rowList = [{valueA: "itemA", valueB: "itemB"}];
    vm.addRow = function() {
        vm.rowList.push({});
    };
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
  <table>
    <tr ng-repeat="row in rowList">
        <td>{{$index}}</td>
        <td><input type="text" ng-model="row.valueA"></td>
        <td><input type="text" ng-model="row.valueB"></td>
    </tr>
  </table>

  <input type="button" value="Add Row" name="addRow"
         ng-click="addRow()">

  <div>
    <p ng-repeat="row in rowList">
     row={{$index}} {{row.valueA}} {{row.valueB}}
    </p>
  </div>
</body>

In the above example, rowList is an array of objects. Each object defines the Model for each row. To add a new row, the addRow button uses the ng-click directive to invoke the addRow function which pushes a new object to the rowList array.

Dynamically add new ng-model to angularJS

1 Answers1