web-dev-qa-db-ja.com

AngularJS-selectタグでng-repeatを使用して追加された空白オプション

AngularJS ng-repeatを使用して、selectで作成するリストボックスがあります。リストボックスが正しく作成され、項目の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"）を選択されたアイテムとして設定することですが、開始する選択されたアイテムはありません。

javascriptselectangularjs
47
bmahf

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

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

これにより初期値が設定され、その後angularが更新されます。

77
dnc253

angularによって自動的に追加されたオプションが非表示であることを確認する最も簡単な方法は、ng-ifディレクティブです。

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

長いRNDの後に解決策を見つけました。次のコードを見つけてください。

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

モジュールコードはこちら

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);
            });

}）;

1
Sapnandu