javascript - 如何使用 Angular 和 bootstrap-ui 初始化下拉菜单

Question

按照一些教程，我已经实现了使用 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>

标签： javascriptangularjsangular-ui-bootstrap

Answer 1

您缺少option的value属性。

如果您将值放入选项中，您将看到选定的值。

请注意，值和变量类型必须是相同的类型（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>