Angular는 모델 값을 설정할 때 선택한 요소에 이상한 옵션을 추가합니다.

Angular는 모델 값을 설정할 때 선택한 요소에 이상한 옵션을 추가합니다.

다음과 같이 정의된 선택 요소가 있습니다.

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id">
    <option value="">Select Country</option>
    <option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

이 select 요소를 포함하는 디렉티브에 값을 설정하지 않으면 모두 정상적으로 작동합니다. 거 할 때newAddressForm.country_id = 9898인 Angular는 과 선택

<option value="? string:98 ?"></option>

왜왜????이것은 어떤 형식이며 왜 이런 일이 발생하는가?가 '아예'를 할 하세요.console.log(newAddressForm.country_id)의 「」, 「」를 합니다."98"

Edit:상황 갱신.사용으로 전환됨ng-select문제는 해결되지 않습니다.

더 않지만, 맨 가 하나 더 ?이치노

의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글의 앵글."none selected" it 그런데 아직도 이해가 안 돼." " " " " " " " " 」 。

newAddressForm.country_id = 98결과는 아직 나오지 않습니다.왜런그 일일?

을 쓰다와 함께 하세요.ng-options이 문제를 해결해 주셨습니다.

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id" ng-options="country.id as country.name for country in countries">
  <option value="">Select Country</option>
</select>

Angular는 선택한 요소의 값을 어레이의 실제 값으로 설정하지 않고 범위 바인딩을 관리하는 내부 작업을 수행합니다.다음 링크에서 Mark Rajcok의 첫 번째 코멘트를 참조하십시오.

https://docs.angularjs.org/api/ng/directive/select#overview

사용자가 옵션 중 하나를 선택하면 Angular는 인덱스(또는 키)를 사용하여 배열(또는 개체)의 값을 검색합니다. 검색된 값은 모델이 설정된 값입니다(따라서 모델이 HTML에서 보이는 값으로 설정되지 않았습니다! 이로 인해 많은 혼란이 발생합니다).

는 잘 ng-repeat최적의 옵션입니다.

값이 정수일 경우 문자열이 아니더라도 "를 사용해야 합니다.이 단순한 이유는 바로 물음표가 값으로 표시되는 이유입니다.

이 기능을 사용하면 안 됩니다.

{ value: 0, name: "Pendiente" },
{ value: 1, name: "Em andamento" },
{ value: 2, name: "Erro" },
{ value: 3, name: "Enviar email" },
{ value: 4, name: "Enviado" }

올바른 방법은 다음과 같습니다.

{ value: "0", name: "Pendiente" },
{ value: "1", name: "Em andamento" },
{ value: "2", name: "Erro" },
{ value: "3", name: "Enviar email" },
{ value: "4", name: "Enviado" }

" "를 사용하지 않는 레코드가 하나 이상 있으면 이 옵션 값을 얻게 됩니다.

오늘 저녁에도 같은 문제가 있었습니다만, Select 옵션이 리스트의 첫 번째로서 표시되어 있었습니다.명시적으로 작성하지는 않았습니다.컨트롤러에서 선택한 옵션 목록을 작성하고 jessedvrs에서 설명한 것과 동일한 ng-options 구문을 사용하고 있었습니다(단, HTML에서 "select an option" default 옵션을 컨트롤러에 삽입하고 있었습니다).

어떤 이유에서인지 선택목록에는 항상 인덱스0에 값이 "?"인 추가 옵션이 표시되지만 컨트롤러에서 기본 옵션을 채우는 방법을 변경하자 이 문제가 사라졌습니다.API 호출을 통해 선택 옵션을 채우고 약속의 내용을 채우고 있었습니다.디폴트의 「select an option(옵션 선택)」옵션을 그 약속의 첫 번째 조작으로 입력하는 실수를 했습니다만, 약속(API 호출을 실시하기 전에)이 아닌 이 조작을 실시하면, 선택 옵션은, 내가 원하는 대로 입력됩니다.

jessedvrs 옵션은 이 문제에 대한 해결책 중 하나라고 생각합니다(HTML 마크업에서 디폴트 옵션을 설정하는 것).하지만 옵션을 javascript로 채우고 싶다면 HTML 렌더링 중에 실행 중인 API나 프로세스를 호출하기 전에 디폴트 옵션을 설정하는 것이 좋습니다.

선택한 요소에 값을 할당하는 경우 Angular(각도)JS는 해당 선택 요소에서 옵션 태그의 값 속성에서 제공된 값을 찾습니다.하지만 문제는, 앵귤러JS는 유형 기반 비교를 수행합니다.따라서 옵션태그의 값이 문자열(통상은 해당)이고 ng-model을 사용하여 바인드하는 변수가 숫자인 경우 Angular는JS는 일치하는 옵션 요소를 찾지 못했기 때문에 다음과 같은 자체 요소를 만듭니다.

<option value="? integer:10 ?"></option>

솔루션은 바인딩하는 동안 적절한 유형으로 변환합니다.

이 경우 해결책은 Integer를 바인드하는 것입니다.

<select name="country_id" id="country_id" required="required" ng-model="parseInt(newAddressForm.country_id)">
<option value="">Select Country</option>
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

값이 Strings로 설정되어 있는 경우 트릭은

<select ... ng-model="newAddressForm.country_id.toString()" >

ng-timeout 끝에 "track by 'value"를 사용합니다.d

다음 예시와 같습니다.

ng-timeout="country.id를 country.id에서 추적하는 국가별 country.name"

스코프 변수에 데이터를 푸시하는 동안 다음 코드를 사용할 수 있습니다.

$scope.enquiryLocationRow.push({'location': EnqLocation.location, 'state_id': Number(EnqLocation.state_id), 'country_id': Number(EnqLocation.country_id)});

그것은 나의 문제를 해결했다.

vm.kanoonCours는 객체 어레이, vm.cours는 문자열 어레이입니다.

<table class="table table-hover">
    <tr style="font-weight: bold; background-color: #dfedf8;">
        <td>index</td>
        <td>course in our system</td>
        <td>course in outside system</td>
    </tr>
    <tr ng-repeat="course in vm.courses">
        <td style="vertical-align: middle;">{{$index+1|persianNumber}}</td>
        <td style="vertical-align: middle;">{{course.CourseTitle}}</td>
        <td>
            <select  
                ng-model="course.KanoonCourseTitle"
                ng-options="option as option for option in vm.kanoonCourses">
            </select>
        </td>
    </tr>
</table>

언급URL : https://stackoverflow.com/questions/16783294/angular-adds-strange-options-into-select-element-when-setting-model-value