Ответ 1

Для справки: Почему angularjs включает пустую опцию при выборе?

Пустое option генерируется, когда значение, на которое ссылается ng-model, не существует в наборе параметров, переданных в ng-options. Это происходит, чтобы предотвратить случайный выбор модели: AngularJS может видеть, что исходная модель либо undefined, либо нет в наборе параметров и не хочет самостоятельно определять значение модели.

Короче: пустая опция означает, что не выбрана допустимая модель (по действию я имею в виду: из набора параметров). Вам нужно выбрать допустимое значение модели, чтобы избавиться от этой пустой опции.

Измените свой код следующим образом

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>

Ответ 2

Несмотря на то, что все вышеприведенные предложения работают, иногда мне нужно иметь пустой выбор (показывая текст заполнителя), когда вы сначала вводите мой экран. Поэтому, чтобы запретить select box добавлять этот пустой выбор в начале (или иногда в конце) моего списка, я использую этот трюк:

Код 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>

Теперь вы определили эту пустую опцию, поэтому поле выбора счастливо, но вы держите его скрытым.

Ответ 3

Вот обновленная скрипка: http://jsfiddle.net/UKySp/

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

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

И обновите свой выбор, чтобы он выглядел следующим образом:

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

Ответ 4

Другой способ решения: использовать $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

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

Приветствия

Ответ 5

Существует несколько способов:

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

Ответ 6

Это своего рода обходное решение, но работает как шарм. Просто добавьте <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>

Ответ 7

Измените свой код следующим образом. Вы забываете о значении внутри опции. Прежде чем назначить ng-модель. Он должен иметь значение. Только тогда он не получит значение undefined.

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

 });

Ответ 8

Если вы просто хотите удалить пустое пространство, используйте ng-show, и все готово! Нет необходимости инициализировать значение в JS.

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

Ответ 9

Также проверьте, есть ли у вас ложное значение или нет. Angularjs вставляет пустую опцию, если у вас есть значение фальшивки. Я боролся в течение 2 дней только из-за ложной ценности. Надеюсь, это будет полезно для кого-то.

У меня были опции как [0, 1], и изначально я был установлен в модель на 0 из-за того, что был вставлен пустой вариант. Обходной путь для этого был [ "0", "1" ].