ドロップダウンリストの空の最初の要素

私はAngularJSの初心者ですが、現在私はDjangoのWebアプリケーションでFront Endの部分にAngularJSを使用しています。私の問題は、スコープからのオブジェクトで設定されたドロップダウンリストは常に空の要素から始まるということです（リストから1つを選択すると、問題はなくなります）。ユーザーがPOSTリクエストを何も選択しなかった場合、通常はそれ以上は動作しないため、問題が発生します。私はあらかじめ選択された価値かそれに類似するもののようなものを持つ方法を知りたいと思います。ここに私のコードの一部です：ドロップダウンリストの空の最初の要素

選択タグ：

<select id="sel" class="input-block-level" ng-model="list_category"> 
      <option ng-repeat="obj in list_categories.data" value="{{obj.id}}">{{obj.name}}</option> 
      <option value="Other">Other</option> 
     </select>

$ scope.list_categories：

var listcategoryPromise = ListCategory.get(); 
    listcategoryPromise.then(function(response) { 
     $scope.list_categories = { 
      meta : response.data.meta, 
      data : response.data.objects 
     }; 
    });

出典

2013-02-05 MariusNV

なぜ[angularjsには選択項目に空のオプションが含まれているのですか？]（http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-選択） –

ディレクティブng-optionsを使用して、このように、 'その他' のオプションからvalueを削除します。

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">  
    <option value="">Other</option> 
</select>

これはlist_category場合が空であることを保証します（エントリが選択されていません）、「その他」オプションが選択されています（デフォルト）。

jsFiddle：私の意見ではhttp://jsfiddle.net/bmleite/gkJve/

出典

2013-02-05 12:35:20 bmleite

私はこれまでと同じようなことを試しましたが、私は同じ問題に遭遇しました。私にとっては、ng-showを使ってテキストフィールドをポップアップしてから選択すると、value = "other"が重要です。 – MariusNV

これは問題ではありません。 ng-show = "！list_category" '（list_category'が選択されていない場合のみ表示）fiddle：http://jsfiddle.net/bmleite/gkJve/2/ – bmleite

そんなに参照してください。オプションとNG-繰り返しを避ける必要があります下に、以下の実施例を探します以下のサンプルコード

<body ng-controller="testcontroller"> 
     <select ng-model="item" ng-options="item.ID as item.Title for item in items"> 
     </select> 
      <span>{{item}}</span> 
    </body> 

App.controller('testcontroller', function ($scope) { 
    $scope.item = '000001'; 
    $scope.items = [ 
     { ID: '000001', Title: 'Chicago' }, 
     { ID: '000002', Title: 'New York' }, 
     { ID: '000003', Title: 'Washington' } 
    ]; 
});

出典

2013-02-05 12:34:26

具体的な構文はAngularjsのタグ。 documentation pageからインスピレーションを受け

：

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories.data"> 
    <option value="Other">Other</option> 
</select>

出典

2013-02-05 12:34:43 maxdec

は、ここで選択リストについてAngularJs.orgのウェブサイトから直接、いくつかのコードです：

<select ng-model="color" ng-options="c.name for c in colors"></select>

まず、あなたが見ることができるように、あなたがする必要はありませんng-repeatを使用してオプションリストを作成します。 Angularは基本的にコレクションのループをforeachにしてオプションリストを作成させます。第二に、あなたは選択にあるngモデルを持っていますが、あなたのコレクション名と同じではありません。これは実際に郵便で収集されるあなたのアイテムになるでしょう。

function MyCntrl($scope) { 
    $scope.colors = [ 
     {name:'black', shade:'dark'}, 
     {name:'white', shade:'light'}, 
     {name:'red', shade:'dark'}, 
     {name:'blue', shade:'dark'}, 
     {name:'yellow', shade:'light'} 
    ]; 
    $scope.color = $scope.colors[2]; // red 
}

これはjavascriptのコントローラコードです。 $scope.colorsはコレクションで、$scope.colorはhtmlの選択リストに割り当てられたモデルプロパティです。この例からわかるように、モデルプロパティには、配列の3番目のオプションのデフォルトの開始値が与えられています。あなたのために、これはページを最初にロードするために使用しているhttp.getから設定できます。

foreachを実行しているときは、基本的にコレクションから「名前」値を取得しています。この値をドロップダウンリストに表示して、この値を投稿に使用します。そのモデルのプロパティを設定することで、ドロップダウンリストに空のオプションフィールドが表示されないようにすることができます。

参考：AngularJS Select

出典

2013-02-05 12:35:06 Chris

this answerがクリーンである：

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

http://jsfiddle.net/MTfRD/2010/

出典

2015-08-05 11:10:55 burnaDLX

あなたには、いくつかのとng-modelを設定している場合は、ドロップダウンの上に空白の空のオプションが表示されます値はng-Repeatの後に作成されたリストオプションに含まれていません。あなたがオリジナルのポストを検討し、ng-modelまたはng-modelにいくつかの有効な値を設定を削除する場合は今、それが正常にに動作しますか、あなたはこれを試して

$scope.list_category = $scope.list_categories.data[0].id;

出典

2016-01-18 06:05:07 Aamir

-1

として選択された最初の項目を設定することができます。

<option style="display: none" value=""></option>

それは誰かを助けることを願って

出典

2016-07-08 09:59:36

で編集してください詳しくは。コード専用と「試してください」の回答は、検索可能なコンテンツが含まれていないため、推奨されません。なぜ誰かが「これを試してみる」べき理由を説明しません。私たちはここで知識のためのリソースとなるよう努力しています。 – abarisone

あなたのコードにインラインスタイルを書き込まないでください。それはJSを介して動的に追加しない限り、悪い習慣です。単にを追加するだけで十分です。 – TGarrett

ドロップダウンリストの空の最初の要素

答えて

関連する問題