Question

这是代码

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<p>Click the table headers to change the sorting order:</p>

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">
<tr>
  <th>Sl no</th>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
<th>Delete</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
  <td>{{$index+1}}</td>
<td>{{x.name}}</td>
<td>{{x.country}}</td>
<td><button type="button" ng-click="Delete($index)">Delete</button></td>
</tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];
    $scope.orderByMe = function(x) {
        $scope.myOrderBy = x;
    }
    $scope.Delete = function(index){
      $scope.names.splice(index, 1);
    };
});
</script>

</body>
</html>

首先，如果我想要删除一行，它可以正常工作，但如果我按名称或国家/地区排序，则每次删除不需要的行。任何人都可以帮助我。这是plunker link。感谢

Answer 1

您可以通过两种方式解决此问题：

正如@Tushar的评论中所提到的，发送整个对象而不仅仅是index和delete函数，您可以：
```
$scope.names.splice($scope.names.indexOf(x), 1);
```
Demo provided由他

或者，您可以像这样引用过滤后的数组：

ng-repeat="x in filtered = (names | orderBy:myOrderBy)"

并且，在delete内，您可以使用它来查找原始数组中的对象索引：

$scope.Delete = function(index){
  $scope.names.splice($scope.names.indexOf($scope.filtered[index]), 1);
};

Demo此方法

Answer 2

使用foreach。试试如下..

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<p>Click the table headers to change the sorting order:</p>

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">
<tr>
  <th>Sl no</th>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
<th>Delete</th>
</tr>
<tr ng-repeat="x in reArrange = (names | orderBy:myOrderBy)">
  <td>{{$index+1}}</td>
<td>{{x.name}}</td>
<td>{{x.country}}</td>
<td><button type="button" ng-click="Delete(x)">Delete</button></td>
</tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];
    $scope.orderByMe = function(x) {
        $scope.myOrderBy = x;
    }
    $scope.Delete = function(x){
            //$scope.names.splice($scope.names.indexOf($scope.reArrange[index]), 1); // pass index
      angular.forEach($scope.names, function (value, index) {

          if (x.name == value.name) {
    $scope.names.splice(index,1)
          }
        })
    }
});
</script>

</body>
</html>

Answer 3

简单的方法是在删除时传递对象，并使用underscore.js从数组中删除它 Check this plnkr

<td>
  <button type="button" ng-click="Delete(x)">Delete</button>
</td>

...

$scope.Delete = function(item){
      $scope.names = _.without($scope.names, _.findWhere($scope.names, item));
};

Answer 4

现在删除功能完全按照我想要的方式工作。

      $scope.Delete = function(name) {
    var index = -1;
    var comArr = eval($scope.names);
    for (var i = 0; i < comArr.length; i++) {
      if (comArr[i].name === name) {
        index = i;
        break;
      }
    }
    if (index === -1) {
      alert("Something gone wrong");
    }
    $scope.names.splice(index, 1);
  };

以下是plunker链接：http://plnkr.co/edit/Az0c6IzCIuB87hac9wgN?p=preview

在AngularJS

4 个答案: