web-dev-qa-db-ja.com

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

私は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>
javascriptangularjshtml-select
295
iConnor

ng-init のように使うことができます。

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

ビューの初期化時に$scope.somethingHereの値が上書きされないようにするには、ng-initの値を次のように合体させます（somethingHere = somethingHere || options[0].value）。

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

これを試して：

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

もう一つのプランカー ここ 上記を考慮して。

69
Michael Benford

たった1つの Srivathsa Harish Venkataramanaによる回答track byに言及されていますが、これは確かにこれに対する解決策です！）

これはPlunker（下のリンク）と一緒に select 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

38
mik-t

次のように、 '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は、プロパティnameとidを持つオブジェクトです。注意してください、 'as'はこのようにng-optionsを表現するのには使われません、なぜならそれは値を設定するだけで、あなたがtrack byを使っているときあなたはそれを変えることができないからです

33
Srivathsa Harish Venkataramana

受け入れられた答えはng-initを使います、しかし document は可能であればng-initを避けるように言います。

下記のデモに見られるように、ngInitの唯一の適切な使用はngRepeatの特別なプロパティをエイリアスすることです。この場合のほかに、スコープの値を初期化するのにngInitよりもむしろコントローラを使用するべきです。

オプションとしてng-repeatの代わりに ng-options を使うこともできます。 ng-repeatでは、ng-selected特殊プロパティーと共に ng-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を使用せずに。

この答えは、どの値を選択するのかわからずに最初の項目を選択する必要がある場合にのみ使用してください。例えば、私はこれを自動補完のために使っています、それは常に最初のアイテムを選ぶ必要があります。

22
allenhwkim

これに対する私の解決策は、私のデフォルトオプションをハードコードするために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からすべての値を返すようにしたいのです、それで私は空白の値を持っています。また私のhamlを許しなさい。これは直接OPの質問に対する答えではないことを私は知っていますが、人々はこれをGoogleで見つけます。これが他の人に役立つことを願っています。

16
penner

モデルから選択したオプションを入力するには、以下のコードを使用してください。

<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>
14
Jayen Chondigara

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

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

空の文字列（null）の値！=を使用してオプションを試したときに、オプションはangleに置き換えられましたが、そのようなオプション（null値を使用）を使用すると、selectはこのオプションと一緒に表示されます。

私の下手な英語ですみません、私はこれで何かを手伝うことを望みます。

10
Maciel Bombonato

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

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

selectをngOptionsとともに使用し、デフォルト値を設定します。

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

公式ドキュメント角度付きデータバインディングのHTML SELECT要素について。

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

8
shilovk

これは私のために働きました。

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

Ben Leshの答え に応答して、この行があるはずです

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
Li Tianjiang

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

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

ディレクティブの中で私は値をチェックするスクリプトを作成し、angleがそれを埋めるときオプションをその値で選択されるように設定します。

 .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
Bruno

次のようにng-selected="true"を使うだけです。

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

モデルをコントローラに設定します。その後、selectはその値にデフォルト設定されます。例：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
  }
});
2
Jens Alenius

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

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

そのため、list.keyとselectedItemの同じ値を持つオプションがデフォルトで選択されます。

1
Rubi saini

単に日付部分を初期化するのではなく何か何かがあれば、それをあなたのコントローラの中で宣言することで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>
1
ofir_aghai

これは私のために働きます

ng-selected="true"
1
I don't know

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

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

あなたは値を設定することができます、しかしあなたは複雑なタイプを使用していて、角度はあなたの視野で設定するためにキー/値を捜します。

それでもうまくいかない場合は、試してみてください。ng-options = "option.value by option.name by options.name"

0
Wesley Rocha

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

私はこれを次のような単純化した方法で実現しました。 $ scope.defaultOption = {キー： '3'、値： 'オプション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>

私はこれが同様の要件を持つ他の誰かに役立つことを願っています。

"Please Select"はJoffrey Outtierの答え here によって完成しました。

0
Spencer Sullivan
    <!--
    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
Mohammad Rahman