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

Question

我有一個默認空行的表（行進一步包括具有不同功能的列）。動態地，可以通過按需要點擊按鈕添加多行。我想在我點擊刪除圖標時刪除一行從同一行（其中一列中包含的刪除圖標）。

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

我有一個上面的列要包含在所有行中。每當我點擊任何行中的remove-icon時（我想刪除單擊某個圖標的特定行）

 vm.removeService = function (service, removeService) {

}

這里是行的ng-repeat代碼。

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

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

Answer 1

嗨，你可以這樣做：假設你的ng-repeat對象將在下面提到。

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

在控制器中：

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

請參閱此小提琴以獲取完整代碼

Answer 2

您可以在service上使用splice和indexOf

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

喜歡：

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