Question

我已閱讀關於此問題的多篇文章，本網站上給出的解決方案似乎對我無效。我有一個選擇框有幾個選項，我需要一個默認值顯示給用戶。目前沒有選擇任何選項。這段代碼可能有什麼問題。

HTML

<select class="form-control input-sm" name="collegeTranscripts1" id="collegeTranscripts1" data-ng- model='transcriptCAdata.typeAccepted' data-ng-options='option.value as option.name for option in typeOptions1'></select> 

JS

$scope.typeOptions1 = [ 
      { name: 'Please Select', value: 'selected' }, 
      { name: 'Official', value: 'OFFICIAL' }, 
      { name: 'Unofficial', value: 'UNOFFICIAL' }, 
      { name: 'None', value: 'NONE' } 
     ]; 

     $scope.form = {type : $scope.typeOptions1[0].value}; 

Answer 1

有幾個問題，我在你的代碼中看到：

1. 屬性data-ng-model進行分離HTML，它看起來像這樣：data-ng- model='transcriptCAdata.typeAccepted'。
2. 另一個問題是，在您的模型中，您正在使用範圍屬性transcriptCAdata.typeAccepted，但是您沒有在控制器中聲明它。我在控制器中看到的是$scope.form = {type : $scope.typeOptions1[0].value};。

您只需將data-ng-model更改爲data-ng-model="form.type"即可。

DEMO

angular.module('app', []) 
 

 
    .controller('Ctrl', function($scope) { 
 
    $scope.typeOptions1 = [ 
 
      { name: 'Please Select', value: 'selected' }, 
 
      { name: 'Official', value: 'OFFICIAL' }, 
 
      { name: 'Unofficial', value: 'UNOFFICIAL' }, 
 
      { name: 'None', value: 'NONE' } 
 
     ]; 
 

 
    $scope.form = {type : $scope.typeOptions1[1].value}; 
 
    });

<div ng-app="app" ng-controller="Ctrl"> 
 
    <select class="form-control input-sm" name="collegeTranscripts1" 
 
      id="collegeTranscripts1" data-ng-model='form.type' 
 
      data-ng-options='option.value as option.name for option in typeOptions1'> 
 
    </select> 
 
    
 
    {{form.type}} 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

UPDATE：

我抄你所提供的PLUNKER並修改它，因爲它有它的問題。