angularjs - AngularJSのselectに空のオプションが含まれているのはなぜですか？

Question

私はここ数週間AngularJSを使用していますが、本当に気になるのは、http：//docs.angularjs.org/api/ngの仕様で定義されているすべての順列または構成を試した後でもです。 .directive：select、select要素の最初の子として空のオプションが表示されます。

これが翡翠です：

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

ここでコントローラー：

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

最後に、生成されるHTMLは次のとおりです。

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

それを取り除くために私は何をする必要がありますか？

PS：これがなくても動作しますが、複数選択せずにselect2を使用すると奇妙に見えます。

score 655 · Accepted Answer

に渡されるオプションのセットにによって参照される値が存在しない場合、空optionが生成されます。これにより、誤ってモデルが選択されるのを防ぐことができます。AngularJSは、初期モデルが未定義であるか、オプションのセットに含まれていないことを認識し、モデル値を独自に決定したくない場合があります。ng-modelng-options

空のオプションを削除したい場合は、コントローラーで次のような初期値を選択するだけです。

$scope.form.type = $scope.typeOptions[0].value;

これがjsFiddleです：http：//jsfiddle.net/MTfRD/3/

つまり、空のオプションは、有効なモデルが選択されていないことを意味します（有効とは、オプションのセットから）。この空のオプションを削除するには、有効なモデル値を選択する必要があります。

score 241 · Accepted Answer

初期値が必要な場合は、@ pkozlowski.opensourceの回答を参照してください。これは、ng-initを使用して（コントローラーではなく）ビューに実装することもできます。

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

初期値が必要ない場合は、「値が空の文字列に設定された単一のハードコードされた要素を要素にネストできます。この要素は、nullまたは「選択されていない」オプションを表します」：

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

score 122 · Accepted Answer

角度<1.4

「null」をオプションの1つの有効な値として扱う人にとって（「null」は以下の例のtypeOptionsの項目の1つの値であると想像してください）、自動的に追加されることを確認する最も簡単な方法を見つけましたオプションが非表示になっているのは、ng-ifを使用することです。

<select ng-options="option.value as option.name for option in typeOptions">
    <option value="" ng-if="false"></option>
</select>

なぜng-ifであり、ng-hideではないのですか？上記の内部の最初のオプションをターゲットにするcssセレクターが必要なため、非表示になっているオプションではなく、「実際の」オプションをターゲットにします。これは、e2eテストに分度器を使用している場合や（何らかの理由で）by.css（）を使用して選択オプションをターゲットにする場合に役立ちます。

角度>=1.4

selectディレクティブとoptionsディレクティブのリファクタリングにより、usingng-ifは実行可能なオプションではなくなったため、ng-show="false"再度機能させるために使用する必要があります。

score 36 · Accepted Answer

多分誰かのために役立つ：

ng-optionsの代わりにプレーンオプションを使用したい場合は、以下のようにすることができます。

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

モデルをインラインで設定します。ng-initを使用して、空のオプションを削除します

score 24 · Accepted Answer

同様のことが私にも起こっていて、Angular1.5へのアップグレードが原因でした。新しいバージョンのAngularではタイプng-initが解析されているようです。古いAngularでは、値が「600」のオプションにマップされていましたが、Angular 1.5では、値が600のオプションを見つけることを期待しているようであるため、これは見つかりません。次に、Angularはランダムな最初のアイテムを挿入します。ng-init="myModelName=600"<option value="600">First</option><option value=600>First</option>

<option value="? number:600 ?"></option>

Angular <1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

角度>1.2

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

score 22 · Accepted Answer

ここにある多数の回答の中で、私は自分に合ったソリューションを再投稿し、次のすべての条件を満たすと考えました。

ng-modelが偽の場合にプレースホルダー/プロンプトを提供しました（例：「- selectregion --」w。value=""）
ng-model値が偽であり、ユーザーがオプションのドロップダウンを開くと、プレースホルダーが選択されます（ここで説明する他のソリューションでは、最初のオプションが選択されているように見えますが、誤解を招く可能性があります）
ユーザーが有効な値の選択を解除できるようにし、基本的に偽の/デフォルト値を再度選択できるようにします

コード

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

src

元のQ＆A- https://stackoverflow.com/a/32880941/1121919

score 17 · Accepted Answer

簡単な解決策：

select option:empty { display:none }

それが誰かを助けることを願っています。理想的には、選択された答えがアプローチである必要がありますが、それが不可能な場合は、パッチとして機能する必要があります。

score 14 · Accepted Answer

はいng-modelプロパティが未定義の場合、ng-modelは空のオプション値を作成します。オブジェクトをng-modelに割り当てると、これを回避できます。

例

角度コーディング

$scope.collections = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement'}
];

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

重要な注意点：

$scope.collections[0]や$scope.collections[1]などの配列のオブジェクトをng-modelに割り当てます。オブジェクトのプロパティは、使用しないでください。サーバーから選択オプション値を取得している場合は、コールバック関数を使用して、オブジェクトをng-modelに割り当てます。

Angularドキュメントからのメモ

注：ngModelは、値ではなく参照によって比較されます。これは、オブジェクトの配列にバインドするときに重要です。例を参照してくださいhttp://jsfiddle.net/qWzTb/

私は何度も試しましたが、ついにそれを見つけました。

score 9 · Accepted Answer

@ pkozlowski.opensourceと@Markの両方の答えは正しいですが、値に関係なく、常にリストの最初の項目を選択する、わずかに変更されたバージョンを共有したいと思います。

<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>

score 4 · Accepted Answer

私はAngular1.4xを使用していて、この例を見つけたので、ng-initを使用してselectの初期値を設定しました。

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

score 3 · Accepted Answer

私は同じ問題に直面しました。通常の投稿でAngularフォームを投稿する場合、Angularでは使用した方法でオプションの値を設定できないため、この問題が発生します。「form.type」の値を取得すると、適切な値が見つかります。フォームの投稿ではなく、角度のあるオブジェクト自体を投稿する必要があります。

score 3 · Accepted Answer

簡単な解決策は、空白の値でオプションを設定すること""です。これにより、余分な未定義のオプションが削除されます。

score 3 · Accepted Answer

わかりました。実際、答えは非常に単純です。Angularで認識されないオプションがある場合、それは鈍いオプションを含みます。あなたが間違っているのは、ng-optionsを使用すると、オブジェクトを読み取るということです。[{ id: 10, name: test }, { id: 11, name: test2 }] right?

これは、モデル値が等しいと評価するために必要なものです。たとえば、選択した値を10にしたい場合、モデルを{ id: 10, name: test }10を選択するような値に設定する必要があるため、そのゴミは作成されません。

それがみんなの理解に役立つことを願っています、私は試してみるのに苦労しました:)

score 2 · Accepted Answer

この解決策は私のために働きます：

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

score 1 · Accepted Answer

これは私のために働いた

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

score 1 · Accepted Answer

これは完全に正常に機能します

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

それが機能する方法は、これは何かを選択する前に表示される最初のオプションを提供しdisplay:none、ドロップダウンからそれを削除するので、必要に応じて行うことができます

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

これにより、select and option選択する前に表示されますが、選択すると消え、ドロップダウンに表示されません。

score 0 · Accepted Answer

これをコントローラーで同じ順序で試してください。

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
];
$scope.form.type = $scope.typeOptions[0];

score 0 · Accepted Answer

これが修正です：

次のようなサンプルデータの場合：

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

選択オプションは次のようになります。-

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

と書くvalue.listCountとvalue.listName、テキストが自動的に入力value.listNameされますが、選択したオプションvalue.listCountの値は、通常の0、1、2 ..などの値を示していますが、ポイントです。

私の場合、financeRef.financeLimitは実際にをつかんでvalue.listCountいて、コントローラーで動的に操作を行うことができます。

score 0 · Accepted Answer

初期値が親要素または1.5コンポーネントからのバインディングからのものである場合は、適切な型が渡されていることを確認してください。バインディングで使用@する場合、渡される変数は文字列になり、オプションが例の場合。整数の場合、空のオプションが表示されます。

initの値を適切に解析するか、バインドするか<しないか@（必要な場合を除いて、パフォーマンスにはあまりお勧めしません）。

score 0 · Accepted Answer

簡単な解決策

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

score 0 · Accepted Answer

オプションを制御できない場合のjQueryを使用したグラインドソリューション

html：

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

js：

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

score 0 · Accepted Answer

モデルをng-initを使用してこの問題を解決する場合：

<select ng-model="foo" ng-app ng-init="foo='2'">

score 0 · Accepted Answer

私は同じ問題を抱えていました、私は（「ng-model」を削除しました）これを変更しました：

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

これに：

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

今は動作していますが、私の場合、そのスコープをng.controllerから削除したので、uが同じことをしなかったかどうかを確認してください。

score 0 · Accepted Answer

私のために働いた唯一のものは、このようにで使用track byすることですng-options：

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

score 0 · Accepted Answer

これらの問題を解決する方法については、angularjsのドキュメントの例を参照してください。

こちらのドキュメントリンクにアクセスしてください
検索' ngModelの解析/フォーマットを介してselectを文字列以外の値にバインドする'
そこにあなたが見ることができます、' convertToNumber 'と呼ばれるディレクティブが問題を解決します。

わたしにはできる。ここでどのように機能するかも見ることができます

score 0 · Accepted Answer

CSSを使用して最初のオプションを非表示にすることはできますが、IE 10、11では機能しません。最良の方法はJqueryを使用して要素を削除することです。このソリューションは、chromeおよびIE10、11でテストされた主要なブラウザーで機能します。

また、angularを使用している場合は、setTimeoutを使用すると機能することがあります

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};

angularjs - AngularJSのselectに空のオプションが含まれているのはなぜですか？

26 に答える 26

Related

Reference