2017-11-14 5 views
0

나는 Ionic을 처음 사용합니다. 나는 자동차 공유 응용 프로그램을 디자인하고 싶습니다. 자주 사용하는 옵션 (예 : "여기", "집"또는 "어디서나") 및 특수한 "대상 선택"옵션이있는 "대상 선택"드롭 다운 메뉴를 만들고 싶습니다.왜 이온 선택 메뉴가 작동하지 않습니까?

이 옵션은 이상적으로 작은 삼각형이있는 다른 드롭 다운 메뉴처럼 보이고 주소를 선택할 수있는 입력이있는 모달을 엽니 다 (아직 없기 때문에 Google지도와 상호 작용해야합니다). 또는 OSM ... 어쨌든).

My current UI

는 다음 코드

<ion-card> 
    <ion-card-header> 
     Where are you going?  
    </ion-card-header> 
    <ion-card-content> 
     <ion-item> 
      <ion-label>Destination</ion-label> 
      <ion-select [(ngModel)]="destination"> 
       <ion-option>Here</ion-option> 
       <ion-option>Home</ion-option> 
       <ion-option>Work</ion-option> 
       <ion-option> 
        <ion-item> 
         <ion-label fixed>Choose a destination</ion-label> 
         <ion-select [(ngModel)]="destination_chosen"> 
         </ion-select> 
        </ion-item> 
       </ion-option> 
       <ion-option>Anywhere</ion-option> 
      </ion-select> 
     </ion-item> 
    </ion-card-content> 
</ion-card> 

을 시도했지만이 고려되지 것 같습니다. 내가 뭘 잘못 했니? 심지어 가능할까요? 그렇지 않은 사람이라면 누구나 좋은 UX 패턴을 사용할 수 있습니까?

+0

문제가 명확하지 않습니다. 무엇이 제대로 작동하지 않습니까? – isherwood

+0

"대상 선택"옵션에서 드롭 다운 모양을 사용하고 싶습니다. –

+0

기본 구성 요소가 아닌 이온 식 드롭 다운에 드롭 다운이있을 수 있다고 생각하지 않습니다. 사용자 지정 구성 요소를 만들어야합니다. 이것을 위해 또는 popover 또는 모달을 사용할 수도 있습니다. –

답변

0

간단한 해결책은 모달의보기를 변경하여 두 번째 단계처럼 옵션을 선택하려는 실제 드롭 다운 메뉴를 표시하는 것입니다. 두 번째 다른 모달은 다른 모달에 모달을 넣는 것이 좋은 UX 실습이 아니기 때문에 이상적이지 않습니다. 그것이 다양한 단계 과정의 일부이기 때문에 이상하지 않을 것입니다.

그래서 같은보기의 일부가 아닌 두 번째 것을 만들거나, JS로 충분히 단순하거나 Angular를 사용하여 더 쉽게 만들어야합니다. 간단한 ng-show 조건이이를 수행해야합니다.

관련 문제