Angular를 사용하는 이유JS 선택에 빈 옵션이 포함되어 있습니까?

Angular를 사용하는 이유JS 선택에 빈 옵션이 포함되어 있습니까?

저는 Angular와 함께 일해왔습니다.지난 몇 주 동안 JS, 그리고 제가 정말로 걱정하는 한 가지는 모든 순열 또는 http://docs.angularjs.org/api/ng.directive: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이렇게 하면 실수로 모델을 선택할 수 없습니다.앵귤러 JS는 초기 모형이 정의되지 않았거나 옵션 집합에 없음을 알 수 있으며 모형 값을 스스로 결정하려고 하지 않습니다.

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

$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 또는 "not selected" 옵션을 나타냅니다.

<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"이 아래 예제의 옵션 유형에 있는 항목 중 하나의 값이라고 상상해 보십시오), 자동으로 추가된 옵션이 숨겨지도록 하는 가장 간단한 방법은 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

인선택및옵리팩링해로으터의를 사용하여,ng-if 실행 더이상실가옵아니로합로전니다야환해므이션능행한▁to합▁is다로 해야 합니다.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>

모델을 인라인으로 설정합니다.eng-init를 사용하여 빈 옵션 제거

저도 비슷한 일이 일어나고 있었고, 각 1.5로 업그레이드했기 때문에 발생했습니다.ng-initAngular의 최신 버전에서 형식에 대해 구문 분석 중인 것 같습니다.이전 Angular에서ng-init="myModelName=600"이 ". "600"이 "600"인 입니다. <option value="600">First</option> 1 수 즉, Angular 1.5는 600의 값을 가진 옵션을 수 없습니다.<option value=600>First</option>그런 다음 Angular는 임의의 첫 번째 항목을 삽입합니다.

<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 속성이 정의되지 않은 경우 yesg-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은 값이 아닌 참조로 비교합니다.이것은 개체 배열에 바인딩할 때 중요합니다.예를 참조하십시오.

저는 많은 시도를 했고 마침내 그것을 찾았습니다.

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

<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 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용, 그은물읽것입다니는, 는다것를체때할사못 ,▁object▁say▁what다것▁an니와 같이 사물을 입니다.[{ id: 10, name: test }, { id: 11, name: test2 }] right?

은 모델 입니다. 을 값이모값평위필가값기다입니해요한하동게일델이은하▁like▁to다▁this값니▁your▁value입▁a,▁model▁set▁to▁need▁you▁value이필위요한,▁needs▁equal▁it▁be▁say와 같은 값으로 설정해야 합니다. 선택한 값을 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▁text다ally의 를 자동으로 채웁니다.value.listName은 그나선택옵션값은입니다.value.listCount비록 내 값들이 정상 0,1,2.. 등등을 보여주지만!!!

저같은경는에우는에.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'">

저도 같은 문제가 있었습니다. 저는 이것을 바꿨습니다.

<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에서 해당 범위를 삭제했기 때문에 동일하게 하지 않았는지 확인하십시오.

제게 유일하게 효과가 있었던 것은track byng-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. 'vngModel 구문 분석/포맷을 통해 문자열이 아닌 값으로 바인딩 선택'을 찾습니다.
3. 거기에서 'convertToNumber'라는 지침이 문제를 해결하는 것을 볼 수 있습니다.

저한테는 효과가 있어요.작동 방식도 확인할 수 있습니다.

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

또한 각도를 사용하는 경우에는 때때로 setTimeout을 사용하면 작동합니다.

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

언급URL : https://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select