Угловой 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

UPDATE (Dec 31, 2015)

Если Вы не хотите, чтобы установить по умолчанию значение и хотите удалить пустую опцию,

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

Вам нужно было установить исходную модель в LUE к фактическому объекту:

$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

Usage:

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

---