AngularJS删除动态生成的行

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

Answer 1

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

Answer 2

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