[angularjs] 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 }

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