angularjs - 초기값 - 앵귤러 ng change




AngularJS가 select에 빈 옵션을 포함하는 이유는 무엇입니까? (17)

저는 지난 몇 주 동안 AngularJS에서 일해 왔습니다. 그리고 정말로 저를 괴롭히는 한 가지는 모든 순열이나 사양을 http://docs.angularjs.org/api/ng.directive:select 에서 정의한 후에도 그렇게하는 것입니다. 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를 여러 번 선택하지 않으면 이상하게 보입니다.


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

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

간단한 솔루션

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


나는 같은 문제를 겪었다. (제거 된 "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에서 해당 범위를 삭제 한 원인이 있기 때문에 동일한 작업을 수행하지 않았는지 확인하십시오.


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

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


빠른 해결책 :

select option:empty { display:none }

누군가가 도움이되기를 바랍니다. 이상적으로, 선택된 대답은 접근 방식이어야하지만 가능하지 않다면 패치로 작동해야합니다.


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

샘플 데이터는 다음과 같습니다.

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.listCountvalue.listName 쓸 때 value.listCount 의 텍스트를 자동으로 채 웁니다. 그러나 값 my가 normal 0,1,2 ...와 같이 표시되지만 선택한 옵션의 값은 value.listCount 입니다. !!!

필자의 경우 financeRef.financeLimit 은 실제로 value.listCount 컨트롤러에서 동적으로 조작 할 수 있습니다.


여기서 많은 답변을 얻었는데, 나는 나를 위해 일했던 솔루션을 다시 게시하고 다음 조건을 모두 충족시킬 것이라고 생각했습니다.

  • NG 모델이 위조 된 경우 자리 표시 자 / 프롬프트를 제공했습니다 (예 : "--select region --" value="" ).
  • ng 모델 값이 위조 되어 사용자가 옵션 드롭 다운을 열면 자리 표시자가 선택됩니다 (여기에 언급 된 다른 해결책은 잘못된 옵션 일 수 있습니다)
  • 사용자가 허위 / 기본값을 다시 선택하여 유효한 값을 선택 취소하도록 허용

암호

<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://.com/a/32880941/1121919


예 ng-model 속성이 정의되지 않은 경우 ng-model은 빈 옵션 값을 만듭니다. 객체를 n-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/

나는 그것을 마침내 찾았습니다.


유사한 점이 나에게 일어나고 있으며 1.5 각도로 업그레이드 된 것이 원인입니다. ng-init 은 새로운 버전의 Angular에서 유형 을 위해 파싱 된 것으로 보입니다. 구형 Angular ng-init="myModelName=600" 은 값이 "600"인 <option value="600">First</option><option value="600">First</option> 매핑되지만 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-init로 사용하는 경우 :

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

이것은 나를 위해 일했다.

<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 하기 전에 select and option 이 제공되지만 일단 선택하면 사라지고 드롭 다운에 표시되지 않습니다.


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

이것은 당신의 모델 값이 평등하다고 평가할 필요가 있습니다. 선택된 값을 10으로하고 싶다고 말하면, 모델을 { id: 10, name: test } 와 같은 값으로 설정하여 { id: 10, name: test } 을 선택해야합니다. 그 쓰레기를 만들지 마라.

희망은 그것이 모두가 이해하는 데 도움이, 나는 힘든 시간을 보냈습니다 :)


초기 값을 원하면 @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>

컨트롤러에서이 순서대로 시도해보십시오.

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

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

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

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

jsFiddle이 있습니다 : http://jsfiddle.net/MTfRD/3/

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



나는 똑같은 문제에 직면했다. 보통 우편을 사용하여 각형을 게시하는 경우 각도와 같이 사용 된 옵션의 값을 설정할 수 없으므로이 문제가 발생합니다. "form.type"값을 얻으면 올바른 값을 찾을 수 있습니다. 양식 게시가 아닌 각도 객체를 게시해야합니다.





angularjs