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

Question

我正在尝试在我的应用程序中简单地选择下拉菜单。我在哪里设置了ng模型的默认值。但在加载时，下拉菜单不会选择ng模型值。 下面是我的代码：

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-变化可以正常使用。 这里'3'应选择加载。我试过ng-init和selected ='selected'，两者都不起作用。任何建议都将有所帮助.--谢谢

Answer 1

在角度方面，更好的方法是将选项定义为数组并绑定它们，以便ng-model将得到更新。

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

尝试像下面片段。此处默认选择的选项是，您可以将其更改为您的需要。

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

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