ng directives for adding new row once using angular js - angularjs-directive

Question

I have table of textboxes. When i try to add the text ion last row I should get new blank row of textboxes added on new row. Currently ng-Blur is there. And I am getting new blank row added on lost focus. But i want it on 1st key press.
If I use ng-keypress or ng-change then on entering each new character new row is added which is not right. Or can I restrict the event to once.
Please let me know what can be done?
following is my HTML code
<div class="col-md-5">
<input placeholder="New Key" ng-model="propertyKey" ng-blur="addNewRow()" class="form-control" type="text" id="key">
</div>

Answer 1

One approach would be to pass the current row index into your ng-keypress handler and only add a new row if the index is exactly one less than the row count.
So your component/directive template would look something like this:
<div ng-repeat="row in $ctrl.rows">
<input placeholder="{{ row.id }}" ng-keypress="$ctrl.handleKeypress($index)" />
</div>
where you pass the $index of the ng-repeat instance to your keypress handler, and that handler would look something like this (assuming this.rows is your data array):
this.handleKeypress = (rowIndex) => {
if (rowIndex === this.rows.length - 1) {
this.rows.push({ id: `row${rowIndex+1}` });
}
};
So once you've added one extra row beyond the current one you're in, no more will be added.
Here's a plunk showing this approach:
http://plnkr.co/edit/4HbYg4S7M67Vpib6dI0E?p=preview