Fetch and show next row in table to the view after delete one row in AngularJS

Question

I am new in angularJS .. when I delete row from table, i want to show next one from next page to keep rows number = 3 (for example)..

html :here are parts of codes :

<tbody id="t"> <!-- fetch data from DB  -->
       <tr id="tr-{{item.id}}" ng-repeat="item in ItemsByPage[currentPage]">                 
            <td>
               <div  ng-model="tid">  {{item.id}}   </div>                                
            </td>
            <td id="tdn-{{item.id}}">
                  <div  ng-model="tname">{{item.name}}  </div>
            </td>
      </tr>                           
 </tbody>



     <ul class="pagination">
         <li><a href="#" ng-click="firstPage()">First</a></li>
         <li ng-repeat="n in range(ItemsByPage.length)"><a href="#" ng-click="setPage()" ng-bind="n+1">1</a></li>
         <li><a href="#" ng-click="lastPage()">Last</a></li>
    </ul>            


<div class="col-xs-4"> <!-- delete user -->
        <input  type="text" ng-model="delId" class="form-control" placeholder="Enter user id to delete the user">                        
        <button ng-click="deleteuser(delId)" type="button" class="btn btn-primary">Delete User</button> 
</div>

JS:

  $scope.deleteuser = function (delId) {
        var data = {delId : $scope.delId};
        $http.post('delete.php', data )
          .success(function(response) {
            $("#tr-"+delId).hide();   
            console.log($("#tr-"+delId).next());
            $("#tr-"+delId).next().show();// It doesnt work 
          });  
        $scope.resetAll();
    };


$scope.setPage = function () {
        $scope.currentPage = this.n;
    };

    $scope.firstPage = function () {
        $scope.currentPage = 0;
    };

    $scope.lastPage = function () {
        $scope.currentPage = $scope.ItemsByPage.length - 1;
    };

I read about $routeProvider and routing between pages, but i didnt know how to use it with pagination,, so if the routing is the solution, how to do it in my code? thanx alot ...

plunker : http://plnkr.co/edit/6GnDdNesbfoy2VbdF2Cr?p=preview

why are you using jquery to delete the row of the user? simply reload the current page items and angular will do all the work for you, I suggest you read https://docs.angularjs.org/guide/databinding and http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — Daniele Sassoli, Oct 04 '15 at 09:00
Reloading pages waste resources. I suggest deleting the item from the items array and searching for the next one to be displayed in the array. — Jax, Oct 04 '15 at 09:08
@Jax I tried to get `next()` but it returns empty object if the deleted row was last on in view — Hala Ba, Oct 04 '15 at 09:11

Fetch and show next row in table to the view after delete one row in AngularJS

0 Answers0