Remove exact row after sorting table in AngularJS

Question

Remove exact row after sorting table in AngularJS

Here is the code

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

Here at first if I want to delete a row it works fine, but if I sort once by name or country then every time the unwanted row is removed. Can anyone help me with this. Here is the link . Thanks to

+3

javascript angularjs

neo.abi1000 May 04 '17 at 6:20

source to share

4 answers

tanmay · Answer 1 · 2017-05-04T07:08:32+0000

There are two ways to solve this problem:

As @Tushar pointed out in the comments, send the whole object instead of a function index

and delete

, you could:

$scope.names.splice($scope.names.indexOf(x), 1);

The demonstration given them

Alternatively, you can have a reference to your filtered array like this:

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

And, internally delete

, you can use this to find the index of an object in the original array:

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

Demo for this approach

Manikandan velayutham · Answer 2 · 2017-05-04T06:58:38+0000

Use foreach. Try as shown below.

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

Run code Hide result

mastermind · Answer 3 · 2017-05-04T07:30:45+0000

The easy way is to pass the object on delete and remove it from the array using 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));
};

neo.abi1000 · Answer 4 · 2017-05-04T06:53:04+0000

Now the delete function works exactly as I want.

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

Here is the plunker link: http://plnkr.co/edit/Az0c6IzCIuB87hac9wgN?p=preview

Remove exact row after sorting table in AngularJS

More articles: