AngularJS - 選択タグでng-repeatを使用して余分な空白オプションが追加されました

Question

私は選択で作成したリストボックスをAngularJS ng-repeatを使用して作成しました。リストボックスは正しく作成され、項目の1つを選択してボタンをクリックすると、関数にアクセスして必要な情報を取得します。次のように

私のhtmlコードは次のとおりです。

<select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select> 
<button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button> 

私の問題は、いつリストボックス塗料、それが空白の上部に一つのアイテムを持っているということです。私はChromeで実行中に、リストボックスを検査するとき、私は、コンソールで次のような出力が得られます。私はNGリピートによって挿入された最初のオプションを取り除くことができますどのように疑問に思って

<select size="6" ng-model="item" ng-options="s.name for s in itemlist" class="ng-pristine ng-valid"> 
<option value="?" selected="selected"></option> 
<option value="0">Item 1</option> 
<option value="1">Item 2</option> 
<option value="2">Item 3</option> 
<option value="3">Item 4</option> 
<option value="4">Item 5</option> 
<option value="5">Item 6</option> 
</select> 

。私は、リストボックスの上部に空白を表示したくありません。 1つのオプションが選択されたアイテムとして最初の実際のオプション（値= "0"）を設定することであることを認識していますが、開始する選択項目がなくなってしまいます。

Answer 1

<option value="?" selected="selected"></option>が選択されていると、ng-modelがng-optionsにない値に設定されていることを意味します。したがって、空白のオプションが必要ない場合は、itemがitemlistの値に設定されていることを確認する必要があります。これはあなたのコントローラで次持つように簡単かもしれない：

$scope.item = $scope.itemlist[0]; 

これはそれをinital値を与えるだろうし、その後の角度は、その後、あなたのためにそれを更新します。

Answer 2

角度で自動的に追加されるオプションが非表示になっているかどうかを確認する最も簡単な方法は、ng-ifディレクティブです。

<select ng-options="option.id as option.description for option in Options"> 
 
    <option value="" ng-if="false"></option> 
 
</select>

Answer 3

は、私はそれがあなたのために働くだろう、次のコードを見つけてください長いRND 後の溶液を発見しました。ここで

は、モジュールコード

var app = angular.module("UserMasterModel", []) 
     .controller("GetUserADDetails", function ($scope, $http,$log) { 
     $http({ 
       method: 'GET', 
       url: '/UserMaster/GetAllRegion' 
      }) 
      .then(function (response) { 
       $scope.Regions = response.data;       
       //$log.info(response); 
      }); 

}）HTMLコードここ

<div class="col-xs-3" ng-controller="GetUserADDetails"> 
      <label>Region</label> 
       <select id="DDLRegion" ng-model="selectedregion" class="form-control" ng-change="getBranched(selectedregion)"> 
           <option value="" >--Select Region--</option>         
           <option ng-repeat="region in Regions" value="{{region.LookupID}}">{{region.LookupValue}}</option> 
        </select> 
</div> 

されています。