web-dev-qa-db-ja.com

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 Demo

angularjsangularjs-select
74
iCode

参考： なぜ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 Demo

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

90
Shiju K Babu

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

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>

これでこの空のオプションを定義したので、選択ボックスは満足ですが、非表示のままにします。

52
RedSparkle

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

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

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

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

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

解決するもう1つの方法は、$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

乾杯

14
Roy M J

これは一種の回避策ですが、魅力のように機能します。フィラーとして<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>
3
Himanshu Arora

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

<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;
3
Bhalchandra K

このようにコードを変更します。オプション内部の値を忘れます。 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'}
      ];
 });
2
Anbu

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

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

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>
1
Farzad.Kamali

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

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

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

0
Vovch