AngularJS가 선택시 빈 옵션을 포함하는 이유는 무엇입니까?

나는 지난 몇 주 동안 AngularJS와 함께 일해 왔으며 실제로 나를 괴롭히는 것은 http://docs.angularjs.org/api/ng 의 사양에 정의 된 모든 순열이나 구성을 시도한 후에도 .directive : select , 여전히 select 요소의 첫 번째 자식으로 빈 옵션이 표시됩니다.

여기 옥이 있습니다 :

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

여기 컨트롤러가 있습니다 :

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

마지막으로 생성되는 HTML은 다음과 같습니다.

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

그것을 없애려면 어떻게해야합니까?

추신 : 이것도없이 작동하지만 다중 선택없이 select2를 사용하면 이상하게 보입니다.

에 option의해 참조 된 값 ng-model이에 전달 된 옵션 세트에 존재하지 않으면 비어 있습니다 ng-options. 우발적 인 모델 선택을 방지하기 위해 발생합니다. AngularJS는 초기 모델이 정의되지 않았거나 옵션 세트에 있지 않고 모델 값을 스스로 결정하고 싶지 않다는 것을 알 수 있습니다.

빈 옵션을 제거하려면 컨트롤러에서 초기 값을 선택하십시오.

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

다음은 jsFiddle입니다. http://jsfiddle.net/MTfRD/3/

즉, 빈 옵션은 유효한 모델이 선택되지 않았 음을 의미합니다 (유효한 옵션은 옵션 세트에서). 이 빈 옵션을 제거하려면 유효한 모델 값을 선택해야합니다.

초기 값을 원하면 @ pkozlowski.opensource의 답변을 참조하십시오.이 FYI는 ng-init를 사용하여 (컨트롤러가 아닌) 뷰에서 구현할 수도 있습니다.

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

초기 값을 원하지 않으면 "값이 빈 문자열로 설정된 하드 코딩 된 단일 요소를 요소에 중첩 할 수 있습니다.이 요소는 null 또는"선택되지 않음 "옵션을 나타냅니다."

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

각도 <1.4

"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 이고 ng-hide가 아닌가? 위의 첫 번째 옵션을 대상으로하는 CSS 선택기가 숨겨져있는 것이 아니라 "실제"옵션을 대상으로 선택하기를 원하기 때문입니다. e2e 테스트에 각도기를 사용하고 어떤 이유로 든 선택 옵션을 대상으로 by.css ()를 사용하면 유용합니다.

각도> = 1.4

select 및 options 지시문의 리팩토링으로 인해 using ng-if은 더 이상 실행 가능한 옵션이 아니므로 ng-show="false"다시 사용하도록 설정해야합니다.

누군가에게 유용 할 수 있습니다.

ng-options 대신 일반 옵션을 사용하려면 다음과 같이하십시오.

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

모델을 인라인으로 설정하십시오. ng-init를 사용하여 빈 옵션을 제거하십시오.

비슷한 일이 나에게 일어나고 있었고 각도 1.5로 업그레이드했기 때문에 발생했습니다. 최신 버전의 Angular에서 유형 에 ng-init대해 구문 분석되는 것 같습니다 . 이전 Angular에서는 값이 "600"인 옵션에 매핑 되지만 Angular 1.5에서는 값이 600 인 옵션을 찾을 것으로 예상되므로이를 찾지 못합니다 . 그러면 Angular는 임의의 첫 번째 항목을 삽입합니다.ng-init="myModelName=600"<option value="600">First</option><option value=600>First</option>

<option value="? number:600 ?"></option>

각도 <1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

각도> 1.2

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

여기에 여러 답변 중, 나는 나를 위해 일한 솔루션을 다시 게시 하고 다음 조건을 모두 충족시킬 것이라고 생각했습니다 .

• ng-model이 잘못된 경우 자리 표시 자 / 프롬프트 제공 (예 : "--select region --"w.value="" )
• ng-model 값이 잘못된 경우 이고 사용자가 옵션 드롭 다운을 열면 자리 표시자가 선택됩니다 (여기에 언급 된 다른 솔루션은 오해의 소지가있는 첫 번째 옵션이 선택된 것으로 나타남)
• 사용자가 유효한 값을 선택 취소 할 수 있도록합니다. 기본적으로 거짓 / 기본값을 다시 선택 합니다.

암호

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

src

오리지널 Q & A- https : //stackoverflow.com/a/32880941/1121919

빠른 해결책 :

select option:empty { display:none }

그것이 누군가를 돕기를 바랍니다. 이상적으로는 선택된 답변이 접근 방식이어야하지만 불가능한 경우에는 패치로 작동해야합니다.

예 ng-model 속성이 정의되지 않은 경우 ng-model은 빈 옵션 값을 만듭니다. ng-model에 객체를 할당하면 이것을 피할 수 있습니다

예

각도 코딩

$scope.collections = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement'}
];

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

중요 사항:

$ scope.collections [0] 또는 $ scope.collections [1]과 같은 배열의 객체를 ng-model에 할당합니다. 객체 속성은 사용하지 마십시오. 콜백 기능을 사용하여 서버에서 옵션 값을 선택하는 경우 ng-model에 객체를 할당하십시오.

각도 문서의 참고 사항

참고 : ngModel은 값이 아니라 참조로 비교합니다. 이것은 객체 배열에 바인딩 할 때 중요합니다. 예를 참조하십시오 http://jsfiddle.net/qWzTb/

나는 마침내 그것을 많이 찾았다.

@ pkozlowski.opensource 's 및 @ Mark 's 답변이 모두 정확하지만 값에 관계없이 항상 목록의 첫 번째 항목을 선택하는 약간 수정 된 버전을 공유하고 싶습니다.

<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>

Angular 1.4x를 사용하고 있으며이 예제를 찾았으므로 ng-init를 사용하여 select의 초기 값을 설정했습니다.

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

나는 같은 문제에 직면했다. 일반 게시물로 각도 양식을 게시하는 경우 각도를 사용하면 옵션을 사용하는 방식으로 옵션 값을 설정할 수 없으므로이 문제가 발생합니다. "form.type"값을 얻으면 올바른 값을 찾을 수 있습니다. 각도 개체는 폼 포스트가 아닌 자체 게시해야합니다.

간단한 해결책은 빈 값으로 옵션을 설정하는 ""것이므로 추가 정의되지 않은 옵션이 제거됩니다.

실제로 대답은 간단합니다. Angular가 인식하지 못하는 옵션이 있으면 둔한 옵션이 포함됩니다. 당신이 잘못하고있는 것은 ng-options를 사용할 때 객체를 읽습니다.[{ id: 10, name: test }, { id: 11, name: test2 }] right?

선택한 값을 10으로 설정하고 모델을 { id: 10, name: test }10을 선택 하는 것과 같은 값으로 설정해야 하므로 휴지통을 만들지 않습니다.

그것이 모두가 이해하는 데 도움이되기를 바랍니다. 나는 힘든 시간을 보냈습니다 :)

이 솔루션은 저에게 효과적입니다.

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

이것은 나를 위해 일했다

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

이것은 완벽하게 작동합니다

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

작동 방식은 무언가를 선택하기 전에 첫 번째로 표시되는 옵션을 제공하고 display:none제거하려면 드롭 다운 에서 제거하므로 원하는 경우 수행 할 수 있습니다

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

그러면 select and option선택하기 전에 선택하지만 한 번 선택하면 사라지고 드롭 다운에 표시되지 않습니다.

동일한 순서로 컨트롤러에서 이것을 시도하십시오.

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
];
$scope.form.type = $scope.typeOptions[0];

수정 사항은 다음과 같습니다.

다음과 같은 샘플 데이터

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

선택 옵션은 다음과 같아야합니다.

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

우리가 쓸 때되는 점 value.listCount으로는 value.listName, 그것은 자동으로 텍스트를 채 웁니다 value.listName하지만 선택된 옵션의 값입니다value.listCount 값이 0, 정상 .. 등등 표시의 나 있지만!

내 경우에는 financeRef.financeLimit실제로을 잡고 value.listCount컨트롤러에서 동적으로 조작 할 수 있습니다.

초기 값이 일부 부모 요소 또는 1.5 구성 요소의 바인딩에서 오는 경우 적절한 유형이 전달되는지 확인하고 싶습니다. @바인딩에 사용 하는 경우 전달 된 변수는 문자열이며 옵션이 예입니다. 정수이면 빈 옵션이 나타납니다.

init의 값을 올바르게 구문 분석하거나 바인딩 <하지 않고 바인딩하십시오 @(필요하지 않은 경우 성능에 권장 되지 않음 ).

간단한 솔루션

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

옵션을 제어하지 않을 때 jQuery를 사용하는 솔루션

html :

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

js :

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

이 문제를 해결하기 위해 ng-init 모델을 사용하는 경우 :

<select ng-model="foo" ng-app ng-init="foo='2'">

나는 같은 문제가 있었다. 나는 ( "ng-model"을 제거했다) 이것을 바꾸었다.

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

이에:

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

이제는 작동하지만 제 경우에는 ng.controller에서 해당 범위를 삭제했기 때문에 u가 동일하지 않은지 확인하십시오.

안녕하세요, jQUery 모바일 참조가 있었고 제거했습니다. jQuery mobile을 사용하면 위의 수정 사항 중 어느 것도 작동하지 않았습니다. (누군가 jQuery Mobile과 Angular JS의 충돌을 설명 할 수 있다면 좋을 것입니다)

https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html

나를 위해 일한 유일한 것은 track by에서 다음 ng-options과 같이 사용하는 것입니다 .

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

이 문제를 극복하는 방법은 angularjs 문서의 예제를 참조하십시오.

1. 이 문서 링크로 이동 하십시오
2. 찾기 ' ngModel 구문 분석을 통해 비 문자열 값을 선택 바인딩 / 서식 '
3. 거기에서 ' convertToNumber ' 라는 지시문 이 문제를 해결한다는 것을 알 수 있습니다 .

그것은 나를 위해 작동합니다. 여기에서 어떻게 작동하는지 볼 수 있습니다

CSS를 사용하여 첫 번째 옵션을 숨길 수는 있지만 IE 10, 11에서는 작동하지 않습니다. 가장 좋은 방법은 Jquery를 사용하여 요소를 제거하는 것입니다. 이 솔루션은 Chrome 및 IE10,11에서 테스트 된 주요 브라우저에서 작동합니다.

또한 angular를 사용하는 경우 setTimeout을 사용하는 경우가 있습니다.

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};