Как инициализировать выпадающее меню с помощью angular и bootstrap-ui - PullRequest
Новая
       11

Как инициализировать выпадающее меню с помощью angular и bootstrap-ui

0 голосов
/ 11 января 2019

Следуя некоторым урокам, я реализовал базовую нумерацию страниц с помощью Angular и Bootstrab.

Что я не могу понять, так это как инициализировать раскрывающееся меню, чтобы выбрать количество записей на странице с помощью моего углового контроллера (чтобы при запуске приложения был выбран параметр $scope.viewby (= 3).

Использование <option selected> - это не то, что я хочу (и также оно не работает). 

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>

1 Ответ

0 голосов
/ 11 января 2019

Вам не хватает атрибута value вашего параметра s.

Если вы введете значения в опцию, вы увидите выбранное значение.

Обратите внимание, что значение и тип переменной должны быть одного типа (int, string и т. Д.) 

<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>
...