AngularJS를 사용하여 선택 요소의 유효성을 검사하는 방법

건너 뛰기

내 페이지에 2 개의 select요소 가있는 다음 HTML이 있습니다. 둘 다 요구되기를 바랍니다. currentModel번째 요소 Year가 기본값 인 이외의 값으로 선택 될 때까지 두 번째 요소 가 비활성화 된 상태로 유지 되기를 원합니다 .

<select class="form-control  input-xsmall select-inline" data-ng-model="currentYear" >
    <option>Year</option>
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
<select  class="form-control  input-xsmall select-inline" data-ng-model="currentModel">
    <option>Model</option>
    <option ng-repeat="model in models" value="{{model.niceName}}">{{model.name}}</option>
</select>

누군가가 이와 같은 선택 요소의 유효성을 검사하는 방법을 도와 줄 수 있습니까?

PSL

당신이 사용에 필요한 모든 및 NG-모델 ng-options대신 수동으로 통해 옵션을 만드는 ng-repeat. 앵귤러가 당신을 위해 옵션을 만들게하십시오.

<select class="form-control  input-xsmall select-inline" data-ng-model="currentYear"
          ng-options="year for year in years track by year">
    <option value="">Year</option>
</select>

<select  class="form-control  input-xsmall select-inline" data-ng-model="currentModel" 
   ng-disabled="!currentYear" 
   ng-options ="model.niceName as model.name for model in models track by model.niceName">
    <option value="">Model</option>
</select>

Plnkr

  • ng-options="year for year in years track by year" 구문을 따릅니다. label for value in array

  • ng-options ="model.niceName as model.name for model in models track by model.niceName" 구문을 따릅니다. select as label for value in array

  • ng-model두 선택 모두 대해 설정하십시오 . select as구문 ( model.niceName as model.name)을 사용한 이후 모델 의 경우 선택한 항목의 속성 currentModel이 있습니다 niceName. select as모델에서 부품 을 제거 하면 해당 모델 개체가 있습니다.

  • 값에 따라 두 번째 선택에서 ng-disabled를 설정하십시오. currentModel

객체를 다룰 때 ng-select를 사용하는 버그 별 트랙이 있기 때문에 as구문을 사용해야 합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

querySelectorAll을 사용하여 양식의 유효성을 검사하는 경우-오류를 출력하기 위해 적절한 범위를 선택하는 방법

분류에서Dev

jquery를 사용하여 요소 목록의 유효성을 검사하는 방법

분류에서Dev

jQuery를 사용하여 HTML 선택 요소의 특정 값을 얻는 방법

분류에서Dev

Vuelidate를 사용하여 <select> 입력의 유효성을 검사하는 방법

분류에서Dev

Java를 사용하여 문자열의 유효성을 검사하는 방법

분류에서Dev

유효성 검사 후 Ajax 응답에있는 요소를 선택하는 방법

분류에서Dev

datetime 선택기에서 두 개의 유효성 검사기를 사용하는 방법

분류에서Dev

hapi joi 선택적 매개 변수의 유효성을 검사하는 방법

분류에서Dev

Symfony 구성 요소를 사용하여 사용자 정의 유효성 검사기에 대한 종속성을 구성하는 방법은 무엇입니까?

분류에서Dev

useEffect ()를 사용하여 유효성을 검사하는 방법

분류에서Dev

유효성 검사 및 선택적 요청 컨텍스트를 사용하여 C # 코드에서 직접 servicestack 서비스를 호출하는 방법

분류에서Dev

유효성 검사 및 선택적 요청 컨텍스트를 사용하여 C # 코드에서 직접 Servicestack 서비스를 호출하는 방법

분류에서Dev

AngularJS를 사용하여 모든 확인란을 선택 / 선택 취소하는 방법은 무엇입니까?

분류에서Dev

xpath를 사용하여 요소를 선택하는 방법

분류에서Dev

Selenium을 통해 CSS 선택기를 사용하여 요소를 찾는 방법

분류에서Dev

vue 및 vuetify를 사용하여 선택한 개체의 요소 목록을 표시하는 방법

분류에서Dev

선택을 사용하여 Java 클래스에서 여러 값의 유효성을 검사하는 방법은 무엇입니까?

분류에서Dev

jquery 유효성 검사기를 사용하여 양식을 제출하기 전에 업로드 할 파일이 선택되었는지 확인하는 방법

분류에서Dev

스키마를 사용하여 Karate에서 가능한 여러 값의 유효성을 검사하는 방법

분류에서Dev

$ (this) 만 사용하여 선택한 요소의 CSS를 변경하는 방법

분류에서Dev

요청에서 유효성 검사 후 Laravel을 사용하여 드롭 다운에서 선택한 값을 표시하는 방법은 무엇입니까?

분류에서Dev

Vue를 사용하여 다른 구성 요소에서 사용하기 위해 선택 구성 요소에서 선택한 값을 얻는 방법

분류에서Dev

후크를 사용하여 반응 구성 요소에서 날짜 선택기를 사용하는 방법

분류에서Dev

jQuery를 사용하여 여러 선택 상자의 유효성을 검사 할 수 없습니다.

분류에서Dev

Vue Composition API에서 ref를 사용하여 양식의 유효성을 검사하는 방법

분류에서Dev

네임 스페이스를 사용하여 XML의 유효성을 검사하는 방법

분류에서Dev

외부 자바 스크립트를 사용하여 양식 값의 유효성을 검사하는 방법

분류에서Dev

PHP를 사용하여 입력 필드의 유효성을 검사하는 방법

분류에서Dev

HTML5를 사용하여 제출 된 HTML 입력의 유효성을 검사하는 방법

Related 관련 기사

  1. 1

    querySelectorAll을 사용하여 양식의 유효성을 검사하는 경우-오류를 출력하기 위해 적절한 범위를 선택하는 방법

  2. 2

    jquery를 사용하여 요소 목록의 유효성을 검사하는 방법

  3. 3

    jQuery를 사용하여 HTML 선택 요소의 특정 값을 얻는 방법

  4. 4

    Vuelidate를 사용하여 <select> 입력의 유효성을 검사하는 방법

  5. 5

    Java를 사용하여 문자열의 유효성을 검사하는 방법

  6. 6

    유효성 검사 후 Ajax 응답에있는 요소를 선택하는 방법

  7. 7

    datetime 선택기에서 두 개의 유효성 검사기를 사용하는 방법

  8. 8

    hapi joi 선택적 매개 변수의 유효성을 검사하는 방법

  9. 9

    Symfony 구성 요소를 사용하여 사용자 정의 유효성 검사기에 대한 종속성을 구성하는 방법은 무엇입니까?

  10. 10

    useEffect ()를 사용하여 유효성을 검사하는 방법

  11. 11

    유효성 검사 및 선택적 요청 컨텍스트를 사용하여 C # 코드에서 직접 servicestack 서비스를 호출하는 방법

  12. 12

    유효성 검사 및 선택적 요청 컨텍스트를 사용하여 C # 코드에서 직접 Servicestack 서비스를 호출하는 방법

  13. 13

    AngularJS를 사용하여 모든 확인란을 선택 / 선택 취소하는 방법은 무엇입니까?

  14. 14

    xpath를 사용하여 요소를 선택하는 방법

  15. 15

    Selenium을 통해 CSS 선택기를 사용하여 요소를 찾는 방법

  16. 16

    vue 및 vuetify를 사용하여 선택한 개체의 요소 목록을 표시하는 방법

  17. 17

    선택을 사용하여 Java 클래스에서 여러 값의 유효성을 검사하는 방법은 무엇입니까?

  18. 18

    jquery 유효성 검사기를 사용하여 양식을 제출하기 전에 업로드 할 파일이 선택되었는지 확인하는 방법

  19. 19

    스키마를 사용하여 Karate에서 가능한 여러 값의 유효성을 검사하는 방법

  20. 20

    $ (this) 만 사용하여 선택한 요소의 CSS를 변경하는 방법

  21. 21

    요청에서 유효성 검사 후 Laravel을 사용하여 드롭 다운에서 선택한 값을 표시하는 방법은 무엇입니까?

  22. 22

    Vue를 사용하여 다른 구성 요소에서 사용하기 위해 선택 구성 요소에서 선택한 값을 얻는 방법

  23. 23

    후크를 사용하여 반응 구성 요소에서 날짜 선택기를 사용하는 방법

  24. 24

    jQuery를 사용하여 여러 선택 상자의 유효성을 검사 할 수 없습니다.

  25. 25

    Vue Composition API에서 ref를 사용하여 양식의 유효성을 검사하는 방법

  26. 26

    네임 스페이스를 사용하여 XML의 유효성을 검사하는 방법

  27. 27

    외부 자바 스크립트를 사용하여 양식 값의 유효성을 검사하는 방법

  28. 28

    PHP를 사용하여 입력 필드의 유효성을 검사하는 방법

  29. 29

    HTML5를 사용하여 제출 된 HTML 입력의 유효성을 검사하는 방법

뜨겁다태그

보관