anglejsを使用してドロップダウンメニューにデフォルトのアイテムを持っています

Question

私は非常にうまく動作するこのhtmlを持っています。私のtopicIdは0から7まで表示され、0が最初の項目です。 しかし、ページが読み込まれてからドロップダウンをクリックするまで、私のドロップダウンには何も表示されません。

最初の項目がデフォルトとして表示されます。どうすればいいですか？

 <div class="selectTopic"> 
      <select id="cTopic" name="cTopic" ng-model="selectedValue"> 
       <option ng-repeat="x in cuc.getData" value="{{x.topicId}}"> {{x.topicDescription}}</option> 
      </select> 
     </div> 

Answer 1

代わりにngOptionsを使用する必要があります。次に、デフォルト値にコントローラを介してモデルINIT：

<select id="cTopic" name="cTopic" ng-model="selectedValue" 
    ng-options="item.topicId as item.topicDescription for item in cuc.getData"> 
</select> 

とコントローラで：

$scope.selectedValue = "topicId1"; 

例を参照してください：

var app = angular.module('TestApp', []); 
 

 
app.controller("testCtrl", function ($scope) { 
 
\t 
 
    $scope.selectedValue = "topicId1"; 
 
    $scope.items = [ 
 
    { 
 
     topicId : "topicId1", 
 
     topicDescription :"topicDescription1" 
 
    }, 
 
    { 
 
     topicId : "topicId2", 
 
     topicDescription : "topicDescription2" 
 
    }, 
 
    { 
 
     topicId : "topicId3", 
 
     topicDescription : "topicDescription3" 
 
    } 
 
    ]; 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="TestApp" ng-controller="testCtrl"> 
 
    <div class="selectTopic"> 
 
     <select id="cTopic" name="cTopic" ng-model="selectedValue" ng-options="item.topicId as item.topicDescription for item in items"> 
 
     </select> 
 
    </div> 
 
</div>

Answer 2

は、あなたが使用NG-選択必要があります：あなたはプレーンなHTMLを使用している場合は、しかし、https://docs.angularjs.org/api/ng/directive/ngSelected

<div class="selectTopic"> 
    <select id="cTopic" name="cTopic" ng-model="selectedValue"> 
     <option ng-repeat="x in cuc.getData" value="{{x.topicId}}" 
      ng-selected="selectedValue === x.topicId"> 
      {{x.topicDescription}} 
     </option> 
    </select> 
</div> 

を、AngularJSは、ドロップダウンを作成するためのより効率的な方法があり、以下を参照してください。https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 3

示唆した答えをしかし、私が使用する傾向のある代替方法はこれです：

<div class="selectTopic"> 
<select id="cTopic" name="cTopic" ng-model="selectedValue" ng-options="x.topicId as x.topicDescription for x in cuc.getData"> 
    <option value="">Select One ...</option> 
</select> 

Angularは、初期化されていない選択肢に対しては何らかの値で開始する必要があります。したがって、htmlに空白のオプションを指定すると、ユーザーに代わって前提条件を選択せず​​に安全に初期化されます。