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

【问题标题】：Remove a row on ng-click using angularJs使用 angularJs 在 ng-click 上删除一行
【发布时间】：2017-09-20 17:34:15
【问题描述】：

我有一个默认空行的表（行进一步包括具有不同功能的列）。可以根据要求通过单击按钮动态添加多行。我想在单击时删除一行从同一行中删除图标（删除图标包含在其中一列中）。

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

我有一个上面的列要包含在所有行中。每当我从任何行中单击删除图标时。（我想删除单击图标的特定行）

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

【问题讨论】：

请发ng-repeat相关的代码。假设您想从列表中删除项目。哪个名单，名字？项目结构...
@MaximShoustin，添加代码

标签： javascript angularjs html-table

【解决方案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);
  }

完整代码请参考fiddle

【讨论】：

【解决方案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)"

vm.removeService = function(service, removeService) {

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

【讨论】：