Я новачок у AngularJS. Я багато шукав, але це не вирішує моєї проблеми.

Я вперше отримую порожній варіант у вікні вибору.

Ось мій 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

Для довідки: Чому angularjs включає порожній параметр у 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>

Працює демонстрація JSFiddle

ОНОВЛЕННЯ (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>

And in JS no need to initialize value.

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

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.

Here is an updated fiddle: 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">

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

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

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

Cheers

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;

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>

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

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

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.

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

Use ng-value instead of value.

$scope.allRecs = [{"text":"hello"},{"text":"bye"}];
$scope.X = 0;

and then in html file should be like:

<select ng-model="X">  
     <option ng-repeat="oneRec in allRecs track by $index" ng-value="$index">{{oneRec.text}}</option>
</select>

For me the answer to this question was using <option value="" selected hidden /> as it was proposed by @RedSparkle plus adding ng-if="false" to work in IE.

So my full option is (has differences with what I wrote before, but this does not matter because of ng-if):

<option value="" ng-if="false" disabled hidden></option>

Finally it worked for me.

<select ng-init="mybasketModel = basket[0]" ng-model="mybasketModel">
        <option ng-repeat="item in basket" ng-selected="$first">{{item}}</option>
</select>

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.

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"].