ng-modelで指定されたデフォルト値がドロップダウンで選択されていません

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-変更が完璧に働いています。 ロード時に '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>