CODEWITHSUNDEEP
javascriptangularjshtml-table
HKI345
HKI345

Reputation: 313

Remove a row on ng-click using angularJs

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

Upvotes: 1

Views: 1380

Answers (2)

Maxim Shoustin
Maxim Shoustin

Reputation: 77920

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

Upvotes: 1

user1608841
user1608841

Reputation: 2475

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

Upvotes: 2

Related Questions