使用angularJs在ng-click上删除一行

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: []}];

Answer 1

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

Answer 2

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