AngularJS - 在選擇標記中使用ng-repeat添加的額外空白選項

我有一個使用AngularJS ng-repeat選擇的列表框。該列表框已正確創建，並且當我選擇其中一個項目並單擊我的按鈕時，我會到達該功能並獲得所需的信息。AngularJS - 在選擇標記中使用ng-repeat添加的額外空白選項

我的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瀏覽器運行期間檢查列表框，我得到了在控制檯下面的輸出：

<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重複插入第一個選項。我不想在列表框頂部看到空白區域。我意識到一種選擇是將第一個實際選項（value =「0」）設置爲所選項目，但我寧願沒有選定的項目啓動。

來源

2013-03-18 bmahf

如果您在選擇時看到<option value="?" selected="selected"></option>，則表示您的ng-model設置爲不在ng-options中的值。因此，如果您不想要空白選項，則需要確保item已設置爲您的itemlist中的值。這可能是因爲在你的控制下容易：

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

這將給它一個inital值，然後將角之後更新它。

來源

2013-03-18 22:32:22 dnc253

嘿謝謝，這個伎倆。 – bmahf 2013-03-19 13:09:49

但用戶會認爲他選擇了一些東西，但那不是事實。如果您使用默認HTML，則在選項列表中不會顯示空白選項，如果將大小設置爲大於1，則不會選擇任何選項。 – Sebastian 2015-01-30 12:12:45

默認HTML是什麼意思？ – Trevor 2015-07-09 19:43:20

確保按角度自動添加選項隱藏的最簡單方法是ng-if指令。

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

來源

2015-07-22 09:41:35

我發現了一個很長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); 
      });

}）;

來源

2017-04-18 11:48:20 Sapnandu

AngularJS - 在選擇標記中使用ng-repeat添加的額外空白選項

回答

相關問題