私は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デモの作業

更新（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;

上記のすべての提案が機能している間、最初に画面に入るときに空の選択（プレースホルダーテキストを表示）が必要になることがあります。したがって、選択ボックスがこの空の選択をリストの最初（または場合によっては最後）に追加しないようにするために、このトリックを使用しています。

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>

これでこの空のオプションを定義したので、選択ボックスは問題ありませんが、非表示のままにしておきます。

更新されたフィドルは次のとおりです。 http //jsfiddle.net/UKySp/

初期モデル値を実際のオブジェクトに設定する必要がありました。

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

そして、次のように選択を更新します。

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

解決する別の方法は、以下を利用することです。 $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

乾杯

次のような複数の方法があります-

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

これは一種の回避策ですが、魅力のように機能します。<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>

空白を削除したいだけの場合は、ng-showを使用すれば完了です。JSで値を初期化する必要はありません。

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

このようにコードを変更します。オプション内の値を忘れています。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

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

valueの代わりにng-valueを使用します。

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

そして、htmlファイルは次のようになります。

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

私にとって、この質問への答え<option value="" selected hidden />は、@ RedSparkleによって提案されたとおりに使用し、さらに追加することでした。ng-if="false"IEでの作業にする。

したがって、私の完全なオプションは次のとおりです（以前に書いたものとは異なりますが、ng-ifのため、これは問題ではありません）：

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

ついにそれは私のために働いた。

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

また、偽の値があるかどうかも確認してください。偽の値がある場合、Angularjsは空のオプションを挿入します。偽りの価値のために2日間苦労しました。誰かのお役に立てば幸いです。

[0、1]のオプションがありましたが、空のオプションが挿入されたため、最初はモデルを0に設定しました。これの回避策は["0"、 "1"]でした。