첫 번째 선택 옵션을 항상 공백으로 설정하는 방법

첫 번째 선택 옵션을 항상 공백으로 설정하는 방법

프로젝트에서 angularjs를 사용하고 있으며 <select> 생성에 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 value로 설정되어 있기 때문에 발생하는 것으로 알고 있습니다.그러나 사용자가 필터를 리셋할 수 있도록 먼저 항상 비워두기를 원합니다.

이렇게 하면 됩니다.

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

옵션 중 하나의 유효한 값으로 "null"을 취급하는 사용자(아래 예에서는 "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?위의 첫 번째 옵션을 대상으로 하는 css 실렉터가 필요하기 때문에 숨겨진 옵션이 아닌 "실제" 옵션을 대상으로 선택합니다.e2e 테스트에 프로젝터를 사용하고 (어떤 이유로든) by.css()를 사용하여 선택한 옵션을 대상으로 할 때 유용합니다.

케빈 - 수탐

를 사용하지 않아도 됩니다.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>

아이템 리스트의 첫 번째 아이템으로 공백 아이템을 포함시키는 것이 가장 좋은 방법인 것 같습니다.

위의 솔루션은 정크 데이터로 모델을 손상시킵니다.지시사항을 사용하여 올바른 방법으로 모델을 재설정하십시오. 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);

        }
    };
});

저도 같은 문제가 있어서 구글을 많이 검색한 결과, 주요 문제는 Angular 1.6.x를 사용한다면 ng-value 디렉티브를 사용하면 기대대로 작동합니다.

또, 컨트롤러에 다음과 같이 초기치를 설정합니다.

$scope.item = 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>

컨트롤러

$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>

언급URL : https://stackoverflow.com/questions/19182961/how-to-set-the-first-select-option-to-always-be-blank