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

Question

私は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>

score 72 · Accepted Answer

これを試して：

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;

上記を考慮して、ここに別のプランカーがあります。

score 42 · Accepted Answer

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

selecttrack byでの使用方法の例を Plunker (以下のリンク) とともに示します。 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かと同じ値を持つプロパティがある場合、ロード時に自動的に選択されます。idcitycities

これはPlunkrです: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

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

score 33 · Accepted Answer

「トラックバイ」を含めた後、次のように 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 を使用している場合は変更できないためです。

score 23 · Accepted Answer

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

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

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

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

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

---------------------- 編集 ----------------
これは機能しますが、@ mik-t の方が好みですorを使用せずにandを使用するhttps://stackoverflow.com/a/29564802/454252を選択する値がわかったら、答えてください。track-byng-optionsng-initng-repeat

この回答は、選択する値がわからないまま最初の項目を選択する必要がある場合にのみ使用してください。たとえば、常に最初のアイテムを選択する必要があるオートコンプリートにこれを使用しています。

score 16 · Accepted Answer

これに対する私の解決策は、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でこれを見つけます. これが他の誰かに役立つことを願っています。

score 10 · Accepted Answer

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

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

score 10 · Accepted Answer

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

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

空の文字列 (null) の値 != でオプションを試したところ、オプションは angular に置き換えられましたが、そのようなオプション (null 値) を入れると、このオプションで選択が表示されます。

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

score 9 · Accepted Answer

`select`withを使用し`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

SELECTangular データバインディングを使用した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

score 3 · Accepted Answer

私の場合、デフォルトはフォームのケースごとに異なるためです。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から翻訳しただけで、穴のことではないにしても、少なくともその要点は正しいです。

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

score 3 · Accepted Answer

Ben Lesh's answerに応じて、この行があるはずです

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>

score 2 · Accepted Answer

2

これは私のために働いています

ng-selected="true"

于 2016-10-21T07:36:52.873 に答える

score 2 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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デフォルトで選択されます。

score 1 · Accepted Answer

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

私はこれを次の単純な方法で実現しました: JS コード: // これら 2 つを反転して、選択されたデフォルトをテストするか、デフォルトの「選択してください」テキストでデフォルトをテストしません //$scope.defaultOption = 0; $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>

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

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

score 0 · Accepted Answer

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

$somethingHere = {name: 'クールな何か'};

値を設定できますが、複雑なタイプを使用しているため、Angular はキー/値を検索してビューに設定します。

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

score -2 · Accepted Answer

-2

一番簡単な方法だと思います

 ng-selected="$first"

于 2015-02-10T21:25:45.727 に答える

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

23 に答える 23

selectwithを使用しngOptionsてデフォルト値を設定する:

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

その他の例:

Related

Reference

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

`select`withを使用し`ngOptions`てデフォルト値を設定する:

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