Ionic 개발 메모장
Ionic 토글(toggle) 사용하기 (설정)
IT김군
2018. 1. 17. 14:07
안녕하세요. IT김군입니다.
사용자 설정같은 부분에 토글(toggle)버튼을 많이들 사용하실텐데요.
이 토글버튼 활용에 대해서 알아보도록 하겠습니다.
아래는 토글 버튼을 추가하실 html에 넣을 소스입니다.
<ion-list>
<ion-item>
<ion-label>토글 버튼</ion-label>
<ion-toggle value="test" [(ngModel)]="test" color="danger" (ionChange)="toogleTest(test)">
</ion-toggle>
</ion-item>
</ion-list>
위에서 보시면 test라는 변수와 toggleTest(test)라는 함수를 포함하였습니다.
아래는 typescript 파일의 소스입니다.
private test : boolean = true;
toggleTest(value){
if(value){
console.log("toggle Value : "+value); //toggle True
}else{
console.log("toggle Value : "+value); //toggle False
}
}
최초 test변수가 true로 되어있으면 toggle 버튼도 체크되어 있는 상태입니다.
위 html에서 (ionChange)에 toggleTest(test)를 넣었기에 toggle 버튼을 클릭하여 상태가 바뀔 때 마다 toggleTest()에 변동값 (test = true / false)를 파라미터로 활용하여 실행합니다.
위 예제 소스를 보시고 응용해서 사용하시면 될 것 같습니다.
감사합니다.