Angular JS從選項中刪除空白選項

Question

我是Angular JS的新手。我搜索了很多，但它不能解決我的問題。

我在選擇框中第一次得到一個空白選項。

這裏是我的HTML代碼

<div ng-app="MyApp1"> 
    <div ng-controller="MyController"> 
     <input type="text" ng-model="feed.name" placeholder="Name" /> 
     <select ng-model="feed.config"> 
      <option ng-repeat="template in configs">{{template.name}}</option> 
     </select> 
    </div> 
</div> 

JS

var MyApp=angular.module('MyApp1',[]) 
MyApp.controller('MyController', function($scope) { 
    $scope.feed = {}; 

     //Configuration 
     $scope.configs = [ 
           {'name': 'Config 1', 
            'value': 'config1'}, 
           {'name': 'Config 2', 
            'value': 'config2'}, 
           {'name': 'Config 3', 
            'value': 'config3'} 
           ]; 
     //Setting first option as selected in configuration select 
     $scope.feed.config = $scope.configs[0].value; 
}); 

但它似乎並沒有工作。 我怎樣才能解決這個問題？這裏是JSFiddle Demo

Answer 1

僅供參考：Why does angularjs include an empty option in select？

空option當由ng-model引用的值在一組傳遞給ng-options選項不存在，則生成。這發生的目的是爲了防止意外的模型選擇：AngularJS可以看到初始模型或者未定義或者不在選項集合中，並且不想自行決定模型值。

簡而言之：空選項意味着沒有選擇有效的模型（通過有效的我的意思是：從選項集合中）。您需要選擇一個有效的模型值來擺脫這個空的選項。

改變這樣

var MyApp=angular.module('MyApp1',[]) 
 
MyApp.controller('MyController', function($scope) { 
 
    $scope.feed = {}; 
 

 
    //Configuration 
 
    $scope.feed.configs = [ 
 
    {'name': 'Config 1', 
 
    'value': 'config1'}, 
 
    {'name': 'Config 2', 
 
    'value': 'config2'}, 
 
    {'name': 'Config 3', 
 
    'value': 'config3'} 
 
    ]; 
 
    //Setting first option as selected in configuration select 
 
    $scope.feed.config = $scope.feed.configs[0].value; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div ng-app="MyApp1"> 
 
    <div ng-controller="MyController"> 
 
    <input type="text" ng-model="feed.name" placeholder="Name" /> 
 
    <!-- <select ng-model="feed.config"> 
 
<option ng-repeat="template in configs">{{template.name}}</option> 
 
</select> --> 
 
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs"> 
 
    </select> 
 
    </div> 
 
</div>

Working JSFiddle Demo

更新代碼（2015年12月31日）

如果你不想設置默認值並希望刪除空白選項，

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs"> 
     <option value="" selected="selected">Choose</option> 
</select> 

而在JS中無需初始化值。

$scope.feed.config = $scope.feed.configs[0].value;

Answer 2

有多種方式一樣 -

<select ng-init="feed.config = options[0]" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs"> 
       </select> 

或者

$scope.feed.config = $scope.configs[0].name; 

Answer 3

這裏是一個更新的小提琴：http://jsfiddle.net/UKySp/

你需要設置你的初始模型VA略實際對象：

$scope.feed.config = $scope.configs[0]; 

和更新您的選擇是這樣的：

<select ng-model="feed.config" ng-options="item.name for item in configs"> 

Answer 4

雖然所有上述建議的工作，有時我需要有一個空的選擇（顯示佔位符文本）當最初進入我的屏幕。因此，爲了防止選擇框從我的清單（在年底或有時）在開始加入這個空選擇我使用這個技巧：

HTML代碼

<div ng-app="MyApp1"> 
    <div ng-controller="MyController"> 
     <input type="text" ng-model="feed.name" placeholder="Name" /> 
     <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config"> 
      <option value="" selected hidden /> 
     </select> 
    </div> 
</div> 

現在您已經定義了這個空選項，所以選擇框很開心，但你保持隱藏。

Answer 5

另一種方法來解決是通過利用：$first在ng-repeat

用法：

<select ng-model="feed.config"> 
    <option ng-repeat="template in configs" ng-selected="$first">{{template.name}}</option> 
</select> 

參考：

ngSelected：https://docs.angularjs.org/api/ng/directive/ngSelected

$第一：https://docs.angularjs.org/api/ng/directive/ngRepeat

乾杯

Answer 6

更改您這樣的代碼。 你忘記了選項內的值。 分配ng模型之前。它必須有價值。只有這樣它纔不會得到未定義的值。

<div ng-app="MyApp1"> 
<div ng-controller="MyController"> 
    <input type="text" ng-model="feed.name" placeholder="Name" /> 
    <select ng-model="feed"> 
     <option ng-repeat="template in configs" value="template.value">{{template.name}}  
</option> 
    </select> 
    </div> 
</div> 

JS

var MyApp=angular.module('MyApp1',[]) 
MyApp.controller('MyController',  
function($scope) { 

    $scope.feed = 'config1';  
    $scope.configs = [ 
          {'name': 'Config 1', 
           'value': 'config1'}, 
          {'name': 'Config 2', 
           'value': 'config2'}, 
          {'name': 'Config 3', 
           'value': 'config3'} 
          ]; 

}); 

Answer 7

還要檢查是否有任何falsy值與否。 如果您有虛假價值，Angularjs會插入一個空白選項。 由於虛假價值，我掙扎了2天。 我希望這會對某人有所幫助。

我有選項[0，1]，最初我被設置爲0，因爲它被插入空選項。 解決方法是[「0」，「1」]。

Answer 8

這是一種解決方法，但像魅力一樣工作。只需添加<option value="" style="display: none"></option>作爲填充。如在：

<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs"> 
     <option value="" style="display: none"></option> 
</select> 

Answer 9

如果你只是想刪除空格使用ng-show，你就完成了！無需在JS中初始化值。

<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList"> <option value="" ng-show="false"></option> </select>

Answer 10

數組使用鍵和值例子

<select ng-model="blah" ng-options="key as value for (key , value) in ['first',second','third']"></select> 

---