[解決済み] AngularJSで選択オプションから空白のオプションを削除する

質問

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

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