web-dev-qa-db-ja.com

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

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

最初にページがリロードされ、オプション要素が選択されていない場合、次のような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-modelがselect値によって設定されているときに起こることを知っています。ただし、ユーザーがフィルターをリセットできるように、最初に常に空白を選択します。

前もって感謝します。

javascriptangularjsoptions
50
arnold

これはあなたのために仕事をします：

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

「null」をオプションの1つの有効な値として扱う（「null」が次の例のtypeOptionsの項目の値であると想像してください）場合、自動的に追加されることを確認する最も簡単な方法を見つけましたオプションが隠されているのは、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（）を使用して選択オプションをターゲットにする場合に役立ちます。

ケビン-スータム

10
Kevin Black

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>
2
m.e.conroy

最良のオプションは、アイテムリストの最初のアイテムとして空白のアイテムを含めることです。

1
Juliane Holzt

上記のソリューションは、ジャンクデータを含むモデルを破損します。ディレクティブを使用して、正しい方法でモデルをリセットしてください。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);

        }
    };
});
1
user5971409

コントローラー

$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>
0
Khaled Ebdelli
        <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>
0
image72