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

Question

按照一些教程，我已经使用 Angular 和 Bootstrab 实现了基本的分页。

我想不通的是如何使用我的 angular 控制器初始化下拉菜单以选择每页的记录数（以便选择选项 $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>

Answer 1

您缺少选项的值属性。

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

请注意，值的类型和变量类型必须相同（整数、字符串等...）

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

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

How to initialize dropdown menu with angular and bootstrap-ui

javascript

angularjs

angular-ui-bootstrap