angularJS how to get index value on every row in table using ui-bootstrap pagination?

Question

I'm using ui-bootstrap pagination, I use $index value to add a comment on every row it is working fine but on 2nd page and 3rd and so on $index value starts from 0 again. how to read index value on 2nd 3rd ... pages,

why it is taking from 0th index again in page 2 and so on. i'm passing index value in in textarea as well.

I have give code below.

var myApp = angular.module('myApp', ['ui.bootstrap'])
  
      .controller('employeeController', function ($scope) {
     
   var employees = [{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
  }, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
  }, {
    "Name": "Blauer See Delikatessen",
    "City": "Mannheim",
    "Country": "Germany"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Bólido Comidas preparadas",
    "City": "Madrid",
    "Country": "Spain"
  }, {
    "Name": "Bon app'",
    "City": "Marseille",
    "Country": "France"
  }, {
    "Name": "Bottom-Dollar Marketse",
    "City": "Tsawassen",
    "Country": "Canada"
  }, {
    "Name": "Cactus Comidas para llevar",
    "City": "Buenos Aires",
    "Country": "Argentina"
  }, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
  }, {
    "Name": "Chop-suey Chinese",
    "City": "Bern",
    "Country": "Switzerland"
  }, {
    "Name": "Comércio Mineiro",
    "City": "São Paulo",
    "Country": "Brazil"
  }];
      $scope.employees=employees;
      
      $scope.showHideAddNotes = function (vendorsId, $index) {
        $scope.comments = vendorsId;
        angular.forEach($scope.employees, function (vendr) {
            if (vendr.VendID == $scope.comments) {
                $scope.showComment = true;
            }
        })
    }
     $scope.pageSize = 10;
                $scope.currentPage = 1;
                $scope.itemsPerPage = $scope.pageSize;
                $scope.maxSize = 5; //Number of pager buttons to show
                $scope.totalItems = $scope.employees.length;
                $scope.setPage = function (pageNo) {
                    $scope.currentPage = pageNo;
                };

                $scope.pageChanged = function () {
                    console.log('Page changed to: ' + $scope.currentPage);
                };

                $scope.setItemsPerPage = function (num) {
                    $scope.itemsPerPage = num;
                    $scope.currentPage = 1; //reset to first page
                }
                
                 $scope.showHideAddNotes = function (index) {
                 alert(index);
        $scope.employees[index].showComment = !$scope.employees[index].showComment;
    }

    $scope.addNote = function (vendkey, index) {
        var notes = APService.SaveVendorComment($('#txtVendorNote' + index).val(), vendkey).responseJSON;
        $scope.employees[index].showComment = !$scope.employees[index].showComment;
      
    }
})

.textarea-container {
            position: relative;
        }

            .textarea-container textarea {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
            }

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<body ng-app="myApp">
    <div ng-controller="employeeController">
        <div class="container" style="margin-top:40px;">
            <div class="row">
                 <div style="text-align: center">
                                    <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
                                </div>
                <div class="col-md-12">
                    <table class="table table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>City</th>
                                <th>Country</th>
                            </tr>
                        </thead>
                        <tbody >
                            <tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">
                                <td>{{emp.Name}}<br>
                                  <div>
                                                <a href="#" ng-click="showHideAddNotes($index)">
                                                    <img src="http://icongal.com/gallery/image/43850/notes_add.png" />
                                                </a>
                                            </div>
                                            <div class="textarea-container" ng-model="commentsArea" ng-show="emp.showComment">
                                                <div style="margin-bottom:5px;">
                                                     <textarea id="txtVendorNote{{$index}}" ng-modal="inputvendor" name="foo" placeholder="Add comments here..."></textarea>
                                                </div>
                                                <button class="btn btn-danger btn-sm" style="padding:2px 10px 2px 10px" ng-click="addNote(vendor.VendKey,$index)">Save</button>
                                            </div>
                                
                                </td>
                                <td>{{emp.City}}</td>
                                <td>{{emp.Country}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                  <div style="text-align: center">
                                    <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
                                </div>
            </div>
        </div>
    </div>
</body>

on each page row started from 0 itself, that why index started from 0, try to get all row count and use that — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 16, 2018 at 6:40

Munim Munna · Accepted Answer · 2018-03-19 17:41:20Z

The $index is actually the index of visible elements. You can get the real index like this.

index += ($scope.currentPage - 1) * $scope.itemsPerPage;

Working Snippet:

var myApp = angular.module('myApp', ['ui.bootstrap'])

  .controller('employeeController', function($scope) {

    var employees = [{
      "Name": "Alfreds Futterkiste",
      "City": "Berlin",
      "Country": "Germany"
    }, {
      "Name": "Berglunds snabbköp",
      "City": "Luleå",
      "Country": "Sweden"
    }, {
      "Name": "Blauer See Delikatessen",
      "City": "Mannheim",
      "Country": "Germany"
    }, {
      "Name": "Blondel père et fils",
      "City": "Strasbourg",
      "Country": "France"
    }, {
      "Name": "Bólido Comidas preparadas",
      "City": "Madrid",
      "Country": "Spain"
    }, {
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    }, {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    }, {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    }, {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    }, {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    }, {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    }];
    $scope.employees = employees;

    $scope.showHideAddNotes = function(vendorsId, $index) {
      $scope.comments = vendorsId;
      angular.forEach($scope.employees, function(vendr) {
        if (vendr.VendID == $scope.comments) {
          $scope.showComment = true;
        }
      })
    }
    $scope.pageSize = 10;
    $scope.currentPage = 1;
    $scope.itemsPerPage = $scope.pageSize;
    $scope.maxSize = 5; //Number of pager buttons to show
    $scope.totalItems = $scope.employees.length;
    $scope.setPage = function(pageNo) {
      $scope.currentPage = pageNo;
    };

    $scope.pageChanged = function() {
      console.log('Page changed to: ' + $scope.currentPage);
    };

    $scope.setItemsPerPage = function(num) {
      $scope.itemsPerPage = num;
      $scope.currentPage = 1; //reset to first page
    }

    $scope.showHideAddNotes = function(index) {
      index += ($scope.currentPage - 1) * $scope.itemsPerPage;
      alert(index);
      $scope.employees[index].showComment = !$scope.employees[index].showComment;
    }

    $scope.addNote = function(vendkey, index) {
      var notes = APService.SaveVendorComment($('#txtVendorNote' + index).val(), vendkey).responseJSON;
      $scope.employees[index].showComment = !$scope.employees[index].showComment;

    }
  })

.textarea-container {
  position: relative;
}

.textarea-container textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<body ng-app="myApp">
  <div ng-controller="employeeController">
    <div class="container" style="margin-top:40px;">
      <div class="row">
        <div style="text-align: center">
          <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
        </div>
        <div class="col-md-12">
          <table class="table table-bordered table-condensed">
            <thead>
              <tr>
                <th>Name</th>
                <th>City</th>
                <th>Country</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">
                <td>{{emp.Name}}<br>
                  <div>
                    <a href="#" ng-click="showHideAddNotes($index)">
                      <img src="http://icongal.com/gallery/image/43850/notes_add.png" />
                    </a>
                  </div>
                  <div class="textarea-container" ng-model="commentsArea" ng-show="emp.showComment">
                    <div style="margin-bottom:5px;">
                      <textarea id="txtVendorNote{{$index}}" ng-modal="inputvendor" name="foo" placeholder="Add comments here..."></textarea>
                    </div>
                    <button class="btn btn-danger btn-sm" style="padding:2px 10px 2px 10px" ng-click="addNote(vendor.VendKey,$index)">Save</button>
                  </div>

                </td>
                <td>{{emp.City}}</td>
                <td>{{emp.Country}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div style="text-align: center">
          <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
        </div>
      </div>
    </div>
  </div>
</body>

Krina Soni · Accepted Answer · 2018-03-16 06:50:12Z

var app = angular.module("myApp", ["ui.bootstrap"]);

app.controller("MainCtrl", function($scope) {
  var allData =
      [your data goes here];

  $scope.totalItems = allData.length;
  $scope.currentPage = 1;
  $scope.itemsPerPage = 5;

  $scope.$watch("currentPage", function() {
    setPagingData($scope.currentPage);
  });

  function setPagingData(page) {
    var pagedData = allData.slice(
      (page - 1) * $scope.itemsPerPage,
      page * $scope.itemsPerPage
    );
    $scope.aCandidates = pagedData;
  }
});

<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <table id="mytable" class="table table-striped">
      <thead>
        <tr class="table-head">
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="person in aCandidates">
          <th>
            <div>{{person}}</div>
          </th>
        </tr>
      </tbody>
    </table>
    <uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>
  </div>
</div>

Add something explanation that, how you fixed the issue or provide working snippet / fiddle.

Collectives™ on Stack Overflow

angularJS how to get index value on every row in table using ui-bootstrap pagination?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related