How to initialize dropdown menu with angular and bootstrap-ui

Question

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>

FarukT · Accepted Answer · 2019-01-11 10:29:02Z

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>

Collectives™ on Stack Overflow

How to initialize dropdown menu with angular and bootstrap-ui

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related