Angular.js選択ボックスにデフォルトオプションを設定する方法


311

私はGoogleを検索しましたが、これについて何も見つかりません。

私はこのコードを持っています。

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

このようないくつかのデータで

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

そして出力はこのようなものです。

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

このような結果が得られるように、データの最初のオプションをデフォルト値として設定する方法はありますか。

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

3
オプションを構築するためにangularが使用されていると想定しない答えがあったら、それは素晴らしいでしょう。オプションがすでにマークアップの一部である場合はどうなりますか?
pspahn 2015

1
@pspahn -に従ってdocs.angularjs.org/api/ng/directive/ngOptions:唯一a **single** hard-coded <option> element ... can be nested into the <select> element.のオプションは、すでにマークアップの一部となることができませんでした。
DIMMリーパー2015

1
OPに答えるが、非常に別の質問...ではないでしょう@pspahn
マリオTrucco

回答:


366

あなたは単にこのようにng-initを使うことができます

<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>

20
私はこの作業に問題がありました、それは私が 'track by'を使用していたということでした、それが問題を修正しました、それは誰かがラインを下るのを助けるために:D
DrCord

61
この回答に問題はありませんが、私の特定のケースでは、ng-initは失敗しました。問題は、ng-initの実行時に、使用していた値がまだ利用できないことでした:ajax呼び出しで値を取得したところ、ng-initはすでに終了しています。最後に、その値にウォッチャーを使用し、その関数でng-initで行ったのと同じことを行いました。うまくいきました。
モーリッツ2014

2
私もこれを解決するのに問題がありました、@ mauritsコメントが私にこのstackoverflow.com/questions/22348886をもたらしました!
Michael

5
Angularのドキュメントでは、これらの種類の値を初期化するためにコントローラー$ scopeをより適切に使用するようになっています。docs.angularjs.org/api/ng/directive/ngInit
Fortuna

3
警告:この目的でng-initを使用すると、$ digest()メソッドが過度に呼び出される可能性があり、コンソール出力が「10 $ digest()の反復回数に達しました。中止します!」などのメッセージが表示されて、すべて赤く醜く見える可能性があります。
DMac the Destroyer 2015

235

あなたは確かにあなたのようにしたい場合は$scope.somethingHereときに、ビューの初期化値が上書きされない、あなたは(合体したいと思うsomethingHere = somethingHere || options[0].value)値あなたのNG-initの中のようなので:

<select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>

22
このソリューションはうまく機能し、選択した回答よりも優れたソリューションです。
MJ

ng-initは次のようにしないでくださいng-init = "somethingHere = somethingHere || options [0]" ??
infinitloop 14

1
options空になることにどう対処するのですか?optionsデータが外部ソースから来ている場合のように。
null

1
@suud ng-initでoptions && options.length> 0を確認するだけです。実際、これのほとんどはコントローラーで行う必要があるため、テスト可能です。
Ben Lesh

@BenLesh最初のオプションの代わりにテキスト(文字列)を書きたい場合。ng-init="somethingHere= somethingHere || 'Select one' " こうやってみました。しかし、それはうまくいきませんでした。私のコードの何が問題になっているのか
codelearner 2016年

69

これを試して:

HTML

<select 
    ng-model="selectedOption" 
    ng-options="option.name for option in options">
</select>

JavaScript

function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        }, 
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

ここのプランカー

モデルにバインドされる値を本当に設定したい場合は、ng-options属性を

ng-options="option.value as option.name for option in options"

とJavascriptに

...
$scope.selectedOption = $scope.options[0].value;

別のPlunkerは、ここで上記を考慮します。


2
問題は、選択ボックスのロードに対してこれを行わなければならないことです。
iConnor 2013

わかりませんでした。あなたは何をしなければなりませんか?
マイケルベンフォード2013

おそらく50以上の選択ボックスに対して手動で行う必要があります
iConnor

すべての選択ボックスのデフォルト値を設定することを意味しますか?もしそうなら、私はあなたの質問でそれは明確ではないと思います。とにかく、すべての選択ボックスにアイテムをロードする必要があると思いますか?もしそうなら、私はそれらのデフォルト値を初期化することは大したことになるとは思いません。
Michael Benford 2013

1
私の問題は、オプションのインデックスがフォームの「送信」から返されることです。私が必要としているのは、あなたがoption.nameと呼んでいるものです。これは、プレーンな古いrailsフォームから返されたものです。ng-repeatを使用して正しいマークアップを取得するため、チェックボックスとラジオボタンは正常に機能します。フォームの送信時にoption.nameを返すにはどうすればよいですか?
pferrel 2014年

40

Srivathsa Harish Venkataramanaによる 1つの回答のみが言及されtrack byており、これは実際にこれに対する解決策です!

ここで使用する方法のPlunker(下のリンク)と一緒に一例であるtrack by選択 ng-options

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

場合selectedCityの角度範囲に定義され、それが持っているid任意の値と同じ値を持つプロパティidの任意のcity上のcitiesリストを、それが自動負荷に選択されます。

ここでは、このためのPlunkerは次のとおりです。 http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

詳細については、ソースドキュメントを参照してください:https : //code.angularjs.org/1.3.15/docs/api/ng/directive/select


1
ありがとうございました;)
Brahim LAMJAGUAR 2017年

1
驚くばかり!ありがとう!
Iurii Golskyi

33

次のように、「track by」を組み込んだ後、ng-optionsでそれを使用して、必要なものを取得できると思います

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

文字列のリストをオブジェクトのリストで置き換える場合は、これを次のように変更するだけなので、この方法が適しています。

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

ここで、somethingHereはもちろん、プロパティの名前とIDを持つオブジェクトです。'as'は、ng-optionsを表現するこの方法では使用されないことに注意してください。これは、値を設定するだけで、track byを使用している場合は変更できないためです。


これは私のために働いたものです。Angularは、スコープのモデル内のオブジェクトを参照リストの選択と同等のものとして識別するために何かが必要だと思います。「guarantor.codeによる追跡」がトリックを実行しました。
markbaldy 2014年

22

受け入れられた答えはuse ng-initですが、可能であればng-initを回避するようにドキュメントに記載されています

以下のデモで見られるように、ngInitの唯一の適切な使用は、ngRepeatの特別なプロパティのエイリアスです。この場合のほかに、スコープの値を初期化するには、ngInitではなくコントローラーを使用する必要があります。

オプションのng-repeat 代わりにng-optionsを使用することもできます。ではng-repeat、あなたが使用することができng-selectedng-repeat特別なプロパティ。つまり、$ index、$ odd、$ evenを使用して、コーディングなしでこれを機能させます。

$first ng-repeatの特別なプロパティの1つです。

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

----------------------編集----------------
これは機能しますが、@ mik-tあなたはどのような値を選択するには、知っている答えhttps://stackoverflow.com/a/29564802/454252使用する、track-byおよびng-options使用せずに、ng-initまたはng-repeat

この回答は、選択する値がわからないまま最初の項目を選択する必要がある場合にのみ使用してください。たとえば、常に最初の項目を選択する必要がある自動補完にこれを使用しています。


5
これは機能しますがng-options、より高速で最適化されているため、使用しないでくださいng-repeat
Iso

@Isoはあなたに反対していませんが、その情報の出典はありますか?
Adam Plocher 2017

1
ここのドキュメント内:docs.angularjs.org/api/ng/directive/ngOptions 「内包式の一部を<select>介してのモデルを割り当てる方法の柔軟性が向上select as」、「の新しいスコープを作成しないことでメモリ消費を削減繰り返される各インスタンス」、「documentFragment個別ではなくオプションでオプションを作成することによりレンダリング速度が向上」
Iso

16

これに対する私の解決策は、htmlを使用してデフォルトのオプションをハードコーディングすることでした。そのようです:

HAMLの場合:

%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC &amp; ON

HTML:

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

デフォルトのオプションでAPIからすべての値を返すようにしたいので、空白の値があります。また、私の言い訳を許しなさい。これがOPの質問への直接の回答ではないことは知っていますが、Googleでこれを見つけます。これが他の誰かを助けることを願っています。


1
これをhtmlに変換しようとしましたが、試したすべてのオンラインコンバーターで失敗しました。
iConnor 2014年

5
なぜhtmlを投稿しないのですか?つまり、そのようなコードを投稿することは本当に必要でしたか?それは、OPが問題のテンプレートエンジンを使用していたようではありません。
arg20 14年

14

以下のコードを使用して、モデルから選択したオプションを入力します。

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>

</select>

私のためにレクチャーを働いた。私の選択リストのオプションをバインドする非同期呼び出しは、ng-modelをもたらしたものよりも少し遅いので、これは私に多くの助けとなりました。ありがとうEebbesen :-)
ajaysinghdav10d

これは私にも有効です。シンプルでわかりやすい。
ケントアギラール

10

オプションの数に応じて、値を配列に入れて、このようにオプションを自動入力することができます

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

10

私の場合、ユーザーにオプションを選択するように伝えるためだけに初期値を挿入する必要があったので、以下のコードが好きです。

<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

空の文字列(null)の値!=を使用してオプションを試したところ、オプションは角度で置き換えられましたが、そのようなオプションを(null値で)置くと、selectがこのオプションで表示されます。

私の悪い英語で申し訳ありませんが、私はこれで何かを助けることを願っています。


8

での使用selectngOptionsデフォルト値の設定:

その他の使用例については、ngOptionsのドキュメントを参照してくださいngOptions

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
    };
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

plnkr.co

SELECT角度データバインディングを使用したHTML要素に関する公式ドキュメント

解析/フォーマットselectによる非文字列値へのバインドngModel

(function(angular) {
  'use strict';
angular.module('nonStringSelect', [])
  .run(function($rootScope) {
    $rootScope.model = { id: 2 };
  })
  .directive('convertToNumber', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(val) {
          return parseInt(val, 10);
        });
        ngModel.$formatters.push(function(val) {
          return '' + val;
        });
      }
    };
  });
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
{{ model }}
</body>

plnkr.co

その他の例:

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.availableOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }, 
     { name: 'Kiwi', value: 'kiwi' }
   ];
   $scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
  </form>  
  </div>
</body>

jsfiddle


4

これでうまくいきました。

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
    <option value="Cool">Something Cool</option>
    <option value="Else">Something Else</option>
</select>

3

私の場合、フォームのデフォルトはケースごとに異なるので。selectタグにカスタム属性を追加します。

 <select setSeletected="{{data.value}}">
      <option value="value1"> value1....
      <option value="value2"> value2....
       ......

ディレクティブで、値をチェックするスクリプトを作成し、angularが値を入力すると、その値のオプションを選択済みに設定します。

 .directive('setSelected', function(){
    restrict: 'A',
    link: (scope, element, attrs){
     function setSel=(){
     //test if the value is defined if not try again if so run the command
       if (typeof attrs.setSelected=='undefined'){             
         window.setTimeout( function(){setSel()},300) 
       }else{
         element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);          
       }
     }
    }

  setSel()

})

ちょうどその場でcoffescriptからこれを翻訳しました、少なくともそれの本質は穴のものではないにしても正しいです。

それは最も簡単な方法ではありませんが、値が変化したときにそれを実行します


3

ベンレッシュの答えに応じて、この行があるはずです

ng-init="somethingHere = somethingHere || options[0]" 

の代わりに

ng-init="somethingHere = somethingHere || options[0].value" 

あれは、

<select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0]"
        ng-options="option.name for option in options track by option.value">
</select>


3

単にng-selected="true"次のように使用します。

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>

2

モデルをコントローラーに設定します。その後、選択はデフォルトでその値になります。例:html:

<select ng-options="..." ng-model="selectedItem">

角度コントローラー(リソースを使用):

myResource.items(function(items){
  $scope.items=items;
  if(items.length>0){
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  }
});


1

ng-optionsレンダリングに使用している場合option、ng-modalと同じ値を持つドロップダウンがデフォルトで選択されています。例を考えてみましょう:

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

したがって、list.keyおよびの値が同じオプション selectedItemがデフォルトで選択されます。


1

デフォルトの「選択してください」を選択不可にする必要がありました。また、デフォルトで選択されたオプションを条件付きで設定できる必要もありました。

JSコード://これら2つを反転して、選択したデフォルトまたはデフォルトなしのデフォルトの「選択してください」テキストをテストします//$scope.defaultOption = 0; $ scope.defaultOption = {key: '3'、value: 'Option 3'};

$scope.options = [
   { key: '1', value: 'Option 1' },
   { key: '2', value: 'Option 2' },
   { key: '3', value: 'Option 3' },
   { key: '4', value: 'Option 4' }
];

getOptions();

function getOptions(){
    if ($scope.defaultOption != 0)
    { $scope.options.selectedOption = $scope.defaultOption; }
}

HTML:

<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>         

これが同様の要件を持つ他の誰かを助けることを願っています。

「選択してください」は、Joffrey Outtierの回答(ここ)によって達成されました


0

日付部分を単に初期化する代わりに何かがある場合は、ng-init()それをコントローラーで宣言して使用し、HTMLの上部で使用できます。この関数はコントローラーのコンストラクターのように機能し、そこで変数を開始できます。

angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => {
   $scope.allOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }
   ];
   $scope.myInit = () => {
      $scope.userSelected = 'apple'
      // Other initiations can goes here..
   }
}]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>

0
    <!--
    Using following solution you can set initial 
default value at controller as well as after change option selected value shown as default.
    -->
    <script type="text/javascript">
      function myCtrl($scope)
        {
          //...
            $scope.myModel=Initial Default Value; //set default value as required
          //..
        }
    </script>
    <select ng-model="myModel" 
                ng-init="myModel= myModel"
                ng-options="option.value as option.name for option in options">
        </select>

0

これを角度コントローラーで試してください...

$ somethingHere = {name: 'Something Cool'};

値を設定できますが、複雑なタイプを使用しており、角度はビューに設定するキー/値を検索します。

そして、機能しない場合は、これを試してください:ng-options = "option.value as option.name for option track in options track by option.name"


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.