Clever Geek Handbook

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


source to share


4 answers


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

+3


source


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


+1


source


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


source


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

0


source






More articles:


All Articles