Remove a row on ng-click using angularJs

Question

I have a table with the default empty row(Row further includes a columns with different functionalities).Dynamically a multiple rows can be added by click of a button as per the requirement.i want to remove a row when i click a remove-icon from the same-row(remove-icon included in one of the column).

<td class="text-right"> <a href="" class="remove-service" ng-click="vm.removeService(service,true)">
                <img src="images/delete.png"></a> &ensp;</td>

i have a above column to be included in all rows.whenever i click on remove-icon from any of the rows.(i want to remove a particular row from which icon is clicked)

 vm.removeService = function (service, removeService) {

}

Here,is the ng-repeat code for the row.

  <tr class="bx--table-row" ng-repeat="service in vm.servicesWithCountries track by $index">

 vm.servicesWithCountries = [{ serviceName:"", countries: []}];

Please post code related to ng-repeat. Suppose you want to remove item from list. Which list, name? item structure ... — Maxim Shoustin
– Maxim Shoustin, Commented Sep 20, 2017 at 9:19

user1608841 · Accepted Answer · 2017-09-20 09:23:13Z

2

Hi you can do like below : Assuming your ng-repeat object will be like somewhat mention below.

 <table>
    <tr ng-repeat="item in items | orderBy: 'id'">
      <td>
        <span>
            Hello, {{item.name}}!
        </span>
      </td>
      <td>
        <a href="#" ng-click="delete(item)">Delete</a>
      </td>
    </tr>
  </table>

and in Controller :

$scope.items = [{
    name: 'item 1',
    id: '4'
  }, {
    name: 'item 2',
    id: '3'
  }, {
    name: 'item 3',
    id: '2'
  }, {
    name: 'item 4',
    id: '1'
  }];

  $scope.delete = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
  }

refer this fiddle for complete code

answered Sep 20, 2017 at 9:23

user1608841

2,4751 gold badge29 silver badges44 bronze badges

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

Comments

Maxim Shoustin · Accepted Answer · 2017-09-20 09:34:15Z

1

You can use splice and indexOf on your service

 <tr class="bx--table-row" ng-repeat="service in vm.servicesWithCountries track by $index">
    <td class="text-right"> <a href="" class="remove-service" 
                              ng-click="vm.removeService(service, true)">
                <img src="images/delete.png"></a> &ensp;</td>
  </tr>

Like:

ng-click="vm.removeService(service,true)"

JS

vm.removeService = function(service, removeService) {

    if(removeService === true){
       var index = vm.servicesWithCountries.indexOf(service); 
       vm.servicesWithCountries.splice(index, 1);
    }        
  }

answered Sep 20, 2017 at 9:34

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Collectives™ on Stack Overflow

Remove a row on ng-click using angularJs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related