Angularjs removing dynamically generated rows

Question

I have following html and Angularjs controller code to add rows dynamically.

<form name="{{form.name}}"
      ng-repeat="form in forms">         
  <h2>{{form.name}}</h2>
  <div ng-repeat="(i,cont) in form.contacts">
          <input type="text" class="xdTextBox" ng-model="cont.ac"/>
          <input type="text" class="xdTextBox" ng-model="cont.a_number"/>
          <input type="text" class="xdTextBox" ng-model="cont.p_id"/>
  </div>
  <button ng-click="submit(form)">Submit</button>
  <button ng-click="addFields(form)">Add</button>
  <hr>
</form>

Controller code to add rowsis

$scope.addFields = function (form) {     
   if (typeof  form.contacts == 'undefined') {
         form.contacts = [];
    }
    form.contacts.push({name:'', ac: '', a_number: '', p_id: '' });
}

What I want to do next is after adding rows if i mouse over any row a delete link or button shows up and if one clicks it, it removes that row. Here is the working plunker for the adding rows. http://plnkr.co/edit/9bUnd7t0PyMwykgi0VZR?p=preview Please let me know how I can mouse over a row and click the remove button or link to remove that list. Thanks

Lukas S. · Accepted Answer · 2014-04-19 00:07:29Z

3

Take a look here:

http://plnkr.co/edit/zxjHLzqiAQnZzcaUwgBL?p=preview

I added the "contact" class to the div container so I could identify it in the CSS:

<div ng-repeat="(i,cont) in form.contacts" class="contact">

I added the remove button inside the container and gave it the "remove" class:

<button type="button" class="remove" ng-click="form.contacts.splice(i, 1);">Remove</button>

(Note: You may wish to have a function inside your scope for removing a contact if you need to do anything more complicated than just removing it from the array.)

To get the button to be hidden initially, but show up when you hover over the row, I used the following CSS:

.contact .remove { visibility: hidden; }
.contact:hover .remove { visibility: visible; }

answered Apr 19, 2014 at 0:07

Lukas S.

5,7685 gold badges37 silver badges52 bronze badges

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

2 Comments

Kroltan Over a year ago

"(Note: You may wish to have a function inside your scope for removing a contact if you need to do anything more complicated than just removing it from the array.)" Nice of you to emphasise that.

Jax Over a year ago

@Sergey K brilliant, exactly what I was looking for

Kroltan · Accepted Answer · 2014-04-19 00:08:50Z

1

You can do it by adding a function to your scope that recieves the form and index, then splicing the desired index out of it:

 <div ng-repeat="(i,cont) in form.contacts">
              <input type="text" class="xdTextBox" ng-model="cont.ac"/>
              <input type="text" class="xdTextBox" ng-model="cont.a_number"/>
              <input type="text" class="xdTextBox" ng-model="cont.p_id"/>
              <button ng-click="delete(form, i)">Delete</button>
      </div>

Then, the Javascript (add this to your controller):

$scope.delete = function(form, index) {
      form.contacts.splice(index, 1);
    }

http://plnkr.co/edit/2SEGDnGoE7kaw0KvOpKr?p=preview

answered Apr 19, 2014 at 0:08

Kroltan

5,1565 gold badges40 silver badges64 bronze badges

Collectives™ on Stack Overflow

Angularjs removing dynamically generated rows

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related