Question

我在我的应用中尝试了简单的选择下拉菜单。我在ng-model中设置了默认值。但是在加载时，下拉列表不会选择ng-model值。以下是我的代码：

HTML：

View <select  ng-model="viewby" ng-change="setItemsPerPage(viewby)"><option>3</option><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option></select> records at a time.

JS：

$scope.viewby=3             
  $scope.setItemsPerPage = function(num) {
    console.log( num);
  }

这里ng-change工作得很好。这里应该在加载时选择'3'。我尝试了ng-init和selected ='selected'，但两者都无效。任何建议都会有所帮助.--谢谢

Answer 1

在角度中，更好的方法是将选项定义为数组并绑定它们，以便更新ng模型。

<强> JS：

 $scope.model = 30;
 $scope.options = [10, 20, 30,40,50];

<强> HTML

 <select  ng-change="setItemsPerPage(model)" ng-model="model" ng-options="value for value in options"></select>

DEMO

Answer 2

尝试下面的代码段。默认选择的选项是 20 ，您可以根据需要进行更改。

＆＃13;

var app = angular.module('app', []);
app.controller("ctrl", function($scope) {
  $scope.selectedOption = 20;
  $scope.setItemsPerPage = function(num) {
    console.log(num);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="ctrl">

    View

    <select ng-model="selectedOption" ng-change="setItemsPerPage(selectedOption)">
      <option>3</option>
      <option>5</option>
      <option>10</option>
      <option>20</option>
      <option>30</option>
      <option>40</option>
      <option>50</option>
    </select>

    records at a time.

  </div>

</div>

＆＃13;

在下拉列表中未选择ng-model中给出的默认值

2 个答案: