ng-options最初に設定する方法常に空白を選択する

Question

私はプロジェクトでangularjsを使用しており、生成にng-optionsを使用しています。

は、最初のページがリロードしたときと全くoption要素は、以下のように生成されたHTMLを選択していない：

<select size="3" ng-model="item" ng-options="s.name for s in itemlist"> 
<option value="?" selected="selected"></option> 
<option value="0">Item 1</option> 
<option value="1">Item 2</option> 
<option value="2">Item 3</option> 
</select> 

をしかし、私は（例2項。）要素を選択したときに、最初の空白の選択がなくなっています。私は、ngモデルが選択された価値によって設定されているので、それが起こっていることを知っています。しかし、私は最初に常に空白を選択して、ユーザーがフィルターをリセットできるようにします。

ありがとうございます。

Answer 1

これはあなたのための作業を行います。オプションのいずれか（のための「ヌル」として有効な値を扱うそこに誰のための

<select size="3" ng-model="item" ng-options="s.name for s in itemlist"> 
    <option value="">Select Option</option> 
</select> 

Answer 2

あなたの最善の選択肢は、空のアイテムをitemlistの最初のアイテムとして含めることです。

Answer 3

代わりにng-optionsを使用し、ng-repeatを使用して最初のオプションを空白にすることができます。以下の例を参照してください。

<select size="3" ng-model="item"> 
    <option value="?" selected="selected"></option> 
    <option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option> 
</select> 

Answer 4

ので、「ヌル」の値であることを想像します以下の例の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（）を使用して選択オプションを対象とするときに便利です。

ケビン - SUU TAM

Answer 5

 <select ng-model="dataItem.platform_id" 
      ng-options="item.id as item.value for item in platformList" 
      ng-init="dataItem.platform_id=dataItem.platform_id||platformList[0].id"></select> 

Answer 6

壊れ意志ジャンクデータとモデル上記の溶液。 JS正しい方法でモデルをリセットするためにディレクティブを使用してください： 選択オプション

Directive" 
.directive('dropDown', function($filter) { 
    return { 

     require: 'ngModel', 
     priority: 100, 
     link: function(scope, element, attr, ngModel) { 

      function parse(value) { 

       if (value) { 

        if(value === "") 
        { 
         return "crap" 
        } 
        else 
        { 
         return value; 
        } 

       } else { 
        return; 
       } 
      } 


      ngModel.$parsers.push(parse); 

     } 
    }; 
}); 

Answer 7

コントローラ

$scope.item = ''; 

$scope.itemlist = { 
    '' = '', 
    'Item 0' = 1, 
    'Item 1' = 2, 
    'Item 2' = 3 
}; 

HTML

<select data-ng-model="item" data-ng-options="v as k for (k, v) in itemlist"></select>