CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
user2314737
user2314737

Reputation: 29407

How to initialize dropdown menu with angular and bootstrap-ui

Following some tutorials, I have realized a basic pagination with Angular and Bootstrab.

What I can't figure out is how to initialize the dropdown menu to choose how many records per page using my angular controller (so that the option $scope.viewby ( = 3) is selected when launching the app.

Using <option selected> is not what I want (and also it doesn't work).

var mockData = [{
  "id": 1,
  "name": "Spizaetus coronatus"
}, {
  "id": 2,
  "name": "Priodontes maximus"
}, {
  "id": 3,
  "name": "Gekko gecko"
}, {
  "id": 4,
  "name": "Aonyx capensis"
}, {
  "id": 5,
  "name": "Spermophilus lateralis"
}, {
  "id": 6,
  "name": "Aegypius occipitalis"
}, {
  "id": 7,
  "name": "Geochelone elephantopus"
}]

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

app.controller('paginate', function($scope, $filter) {
  $scope.data = mockData
  $scope.viewby = 3
  $scope.totalItems = $scope.data.length
  $scope.currentPage = 2
  $scope.itemsPerPage = $scope.viewby
  $scope.maxSize = 5; //Number of pager buttons to show
  $scope.limits = [3, 5, 10, 20]

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

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

  $scope.setItemsPerPage = function(num) {
    console.log("current viewby: ", $scope.viewby)
    $scope.itemsPerPage = num
    $scope.currentPage = 1 //reset to first page
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app='myApp'>
  <div ng-controller='paginate'>
    <table class="table">
      <tr ng-repeat="row in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
        <td>{{row.name}}</td>
        <td>{{row.id}}</td>
      </tr>
    </table>
    View
    <select ng-model="viewby" ng-change="setItemsPerPage(viewby)">
      <option>3</option>
      <option>5</option>
      <option>10</option>
      <option>20</option>
    </select> records at a time.

    <div uib-pagination num-pages="numPages" total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" class="pagination-sm" max-size="maxSize" rotate="false" boundary-links="true" ng-change="pageChanged()">
    </div>
  </div>
</div>

Upvotes: 1

Views: 317

Answers (1)

FarukT
FarukT

Reputation: 1668

You are missing the value attribute of your options.

If you put values into option you'll see the selected value.

Note that the value's and variable type must be same type (int,string etc...)

<select ng-model="viewby" ng-change="setItemsPerPage(viewby)">
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
</select>


var mockData = [{
  "id": 1,
  "name": "Spizaetus coronatus"
}, {
  "id": 2,
  "name": "Priodontes maximus"
}, {
  "id": 3,
  "name": "Gekko gecko"
}, {
  "id": 4,
  "name": "Aonyx capensis"
}, {
  "id": 5,
  "name": "Spermophilus lateralis"
}, {
  "id": 6,
  "name": "Aegypius occipitalis"
}, {
  "id": 7,
  "name": "Geochelone elephantopus"
}]

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

app.controller('paginate', function($scope, $filter) {
  $scope.data = mockData
  $scope.viewby = '3'
  $scope.totalItems = $scope.data.length
  $scope.currentPage = 2
  $scope.itemsPerPage = $scope.viewby
  $scope.maxSize = 5; //Number of pager buttons to show
  $scope.limits = [3, 5, 10, 20]

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

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

  $scope.setItemsPerPage = function(num) {
    console.log("current viewby: ", $scope.viewby)
    $scope.itemsPerPage = num
    $scope.currentPage = 1 //reset to first page
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app='myApp'>
  <div ng-controller='paginate'>
    <table class="table">
      <tr ng-repeat="row in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
        <td>{{row.name}}</td>
        <td>{{row.id}}</td>
      </tr>
    </table>
    View
    <select ng-model="viewby" ng-change="setItemsPerPage(viewby)">
      <option value="3">3</option>
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="20">20</option>
    </select> records at a time.

    <div uib-pagination num-pages="numPages" total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" class="pagination-sm" max-size="maxSize" rotate="false" boundary-links="true" ng-change="pageChanged()">
    </div>
  </div>
</div>

Upvotes: 2

Related Questions