使用AngularJS从Select Option中删除Blank选项

I am new to AngularJS. I searched a lot, but it does not solve my problem.

我是AngularJS的新手。我搜索了很多，但它并没有解决我的问题。

I am getting a blank option for the first time in select box.

我在选择框中第一次得到一个空白选项。

Here is my HTML code

这是我的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

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

But it doesn't seem to work. How can I get this solved? Here is JSFiddle Demo

但它似乎没有用。我怎样才能解决这个问题？这是JSFiddle演示

10 个解决方案

#1

For reference : Why does angularjs include an empty option in select?

供参考：为什么angularjs在select中包含一个空选项？

The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.

当传递给ng-options的一组选项中不存在ng-model引用的值时，将生成空选项。这可以防止意外的模型选择：AngularJS可以看到初始模型在选项集中未定义或不定义，并且不希望自己决定模型值。

In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option.

简而言之：空选项意味着没有选择有效模型（有效意思是：来自选项集）。您需要选择一个有效的模型值来摆脱这个空选项。

Change your code like this

像这样更改你的代码

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

工作JSFiddle演示

UPDATE (Dec 31, 2015)

更新（2015年12月31日）

If You don't want to set a default value and want to remove blank option,

如果您不想设置默认值并想要删除空白选项，

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

And in JS no need to initialize value.

在JS中无需初始化值。

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

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

#2

While all the suggestions above are working, sometimes I need to have an empty selection (showing placeholder text) when initially enter my screen. So, to prevent select box from adding this empty selection at the beginning (or sometimes at the end) of my list I am using this trick:

虽然上面的所有建议都有效，但有时候我需要在最初进入我的屏幕时有一个空的选择（显示占位符文本）。因此，为了防止选择框在我的列表的开头（或有时在结尾）添加这个空选择，我使用这个技巧：

HTML Code

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

Now you have defined this empty option, so select box is happy, but you keep it hidden.

现在你已经定义了这个空选项，所以选择框很开心，但你保持隐藏状态。

#3

Here is an updated fiddle: http://jsfiddle.net/UKySp/

这是一个更新的小提琴：http：//jsfiddle.net/UKySp/

You needed to set your initial model value to the actual object:

您需要将初始模型值设置为实际对象：

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

And update your select to look like this:

并将您的选择更新为如下所示：

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

#4

Another method to resolve is by making use of: $first in ng-repeat

另一种解决方法是在ng-repeat中使用：$ first

Usage:

用法：

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

References:

参考文献：

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

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

$first : https://docs.angularjs.org/api/ng/directive/ngRepeat

$ first：https：//docs.angularjs.org/api/ng/directive/ngRepeat

Cheers

干杯

#5

There are multiple ways like -

有多种方式可以 -

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

Or

要么

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

#6

It is kind of a workaround but works like a charm. Just add <option value="" style="display: none"></option> as a filler. Like in:

这是一种解决方法，但工作就像一个魅力。只需添加 作为填充符。像：

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

#7

If you just want to remove the blank space use ng-show and you are done! No need to initialize value in JS.

如果您只想删除空格，请使用ng-show，您就完成了！无需在JS中初始化值。

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

#8

Change your code like this. You forget about the value inside option. Before you assign the ng-model. It must have a value. Only then it doesn't get the undefined value.

像这样更改你的代码。你忘记了选项里面的价值。在分配ng-model之前。它必须有价值。只有这样它才能获得未定义的值。

<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

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'}
                           ];

 });

#9

Also check whether you have any falsy value or not. Angularjs will insert an empty option if you do have falsy value. I struggled for 2 days just due to falsy value. I hope it will be helpful for someone.

还要检查你是否有任何虚假价值。如果你确实有假值，Angularjs会插入一个空选项。由于价值不重，我挣扎了2天。我希望它会对某人有所帮助。

I had options as [0, 1] and initially I was set the model to 0 due to that it was inserted empty option. Workaround for this was ["0" , "1"].

我有[0,1]的选项，最初我将模型设置为0，因为它插入了空选项。解决方法是[“0”，“1”]。

#10

For Array use key and value example

对于Array，使用键和值示例

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