53

プロジェクトで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-model が設定されているため、それが起こっていることを私は知っています。しかし、ユーザーがフィルターをリセットできるように、最初に常に空白を選択する必要があります。

前もって感謝します。

4

8 に答える 8

10

「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-hide ではなく ng-if なのですか? 上記の選択内の最初のオプションをターゲットとするcssセレクターが必要なため、非表示のオプションではなく、「実際の」オプションをターゲットにします。e2e テストに分度器を使用していて、(何らかの理由で) by.css() を使用して選択オプションをターゲットにする場合に役立ちます。

ケビン - スー・タム

于 2015-04-03T08:35:52.857 に答える
2

の使用をやめて代わりに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>
于 2013-10-04T14:19:16.960 に答える
1

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

        }
    };
});
于 2016-02-23T23:07:22.323 に答える
0

コントローラ

$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>
于 2017-01-12T01:20:39.413 に答える
0 
        <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>
于 2015-06-02T04:16:48.880 に答える