ng directives for adding new row once using angular js

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>

MikeJ · Accepted Answer · 2018-02-08 14:07:33Z

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

edited Feb 8, 2018 at 14:07

answered Feb 8, 2018 at 4:39

MikeJ

2,34416 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ng directives for adding new row once using angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related