47

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>

私の問題は、リストボックスが描画されると、上部に空白の項目が 1 つあることです。Chrome での実行中にリストボックスを調べると、コンソールに次の出力が表示されます。

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

ng-repeat によって挿入された最初のオプションをどのように取り除くことができるのか疑問に思っています。リストボックスの上部に空白を表示したくありません。1 つのオプションは、最初の実際のオプション (value="0") を選択したアイテムとして設定することですが、選択したアイテムを開始する必要はありません。

4

3 に答える 3

77

選択に表示されるときはいつでも、にない値に設定されている<option value="?" selected="selected"></option>ことを意味します。したがって、空白のオプションが必要ない場合は、 がの値に設定されていることを確認する必要があります。これは、コントローラーに以下を含めるのと同じくらい簡単です。ng-modelng-optionsitemitemlist

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

これにより初期値が与えられ、その後angularがそれを更新します。

于 2013-03-18T22:32:22.103 に答える