ng-options如何設置第一個選擇始終爲空

我在項目中使用angularjs，並且在其中使用ng-options來生成。ng-options如何設置第一個選擇始終爲空

最初，當頁面重新加載，沒有選項選擇元素像下面生成的HTML：

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

但是，當我選擇一個元素（例如項目2）第一個空白選擇走了。我知道它的發生，因爲ng-model正在通過選擇值來設置。但我希望首先選擇始終空白，以便用戶可以重置過濾器。

在此先感謝。

來源

2013-10-04 arnold

126

這將做的工作適合你：

<select size="3" ng-model="item" ng-options="s.name for s in itemlist"> 
    <option value="">Select Option</option> 
</select>

來源

2013-10-04 15:05:33 geniuscarrier

這是正確的答案。 – kmdsax

我的英雄！我一直在努力與ng-options進行相當長一段時間，現在和@arnold一樣有問題。這是唯一的永久和堅實的解決方案。謝謝！ –

謝謝，這讓我難以忘懷 –

看來您的最佳選擇是將空白項目作爲itemlist中的第一個項目。

來源

2013-10-04 14:02:01

當dom初始化時會創建兩個空白選擇。 – arnold

您可以放棄使用ng-options並改爲使用ng-repeat，並將第一個選項留空。見下面的例子。

<select size="3" ng-model="item"> 
    <option value="?" selected="selected"></option> 
    <option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option> 
</select>

來源

2013-10-04 14:19:16

ng-options是選擇元素的「角度方法」，並且（一旦正確使用）會增加很多ng-repeat沒有的功能。 – rushkeldon

@rushkeldon：直接從AngularJS文檔中獲得：「在很多情況下，ngRepeat可以用於

@meconroy同樣的鏈接也說明了（它可能自你最初發布以來已經更新），'ng-options'更有效率 - 速度更快，佔用內存更少，因爲它不會爲列表中的每個項目創建新的範圍。 – plamut

對於任何人在那裏，治療的選擇之一（「零」作爲有效值所以可想而知，「空」是一個值下面例子中的typeOptions中的一個項目），我發現確保自動添加選項隱藏的最簡單方法是使用ng-if。

<select ng-options="option.value as option.name for option in typeOptions"> 
    <option value="" ng-if="false"></option> 
</select>

爲什麼ng-if而不是ng-hide？因爲你想要上面選擇第一個選項的css選擇器選擇目標「真實」選項，而不是隱藏的選項。當您使用量角器進行e2e測試時（以及由於某種原因）您使用by.css（）來定位選擇選項時，它會很有用。

凱文 - 蘇TAM

來源

2015-04-03 08:35:52

 <select ng-model="dataItem.platform_id" 
      ng-options="item.id as item.value for item in platformList" 
      ng-init="dataItem.platform_id=dataItem.platform_id||platformList[0].id"></select>

來源

2015-06-02 04:16:48 image72

上面會損壞與垃圾數據模型中的溶液。請使用指令的模式重新以正確的方式 JS：選擇選項

Directive" 
.directive('dropDown', function($filter) { 
    return { 

     require: 'ngModel', 
     priority: 100, 
     link: function(scope, element, attr, ngModel) { 

      function parse(value) { 

       if (value) { 

        if(value === "") 
        { 
         return "crap" 
        } 
        else 
        { 
         return value; 
        } 

       } else { 
        return; 
       } 
      } 


      ngModel.$parsers.push(parse); 

     } 
    }; 
});

來源

2016-02-23 23:07:22 user5971409

控制器

$scope.item = ''; 

$scope.itemlist = { 
    '' = '', 
    'Item 0' = 1, 
    'Item 1' = 2, 
    'Item 2' = 3 
};

HTML

<select data-ng-model="item" data-ng-options="v as k for (k, v) in itemlist"></select>

來源

2017-01-12 01:20:39

ng-options如何設置第一個選擇始終爲空

回答

相關問題