Angular 앱- 10. 이미지를 보기로 사용하기

Angular 앱- 10. 이미지를 보기로 사용하기

 

이번 포스팅에서 문제의 보기를 텍스트가 아닌 이미지를 사용해서 문제를 만드는 방법에 대해 작성한다. 

 

기존에 작성한 코드에서 Answer 의 문제 타입이 image 인 경우, image 클래스를 추가해준다. 

 어떤 문제의 경우 보기 타입이 image로 되어 있는것을 확인할수 있다. 

answers 가 image 인 경우

angular 코드를 이용해서 image 추가하는 코드이다. 

먼저 Answer.image 가 존재한다면 "image" 클래스를 추가하고, ng-style 또한 추가한다. 그리고 quiz.css 로 가서 image 에 대한 style 을 추가해 주면 된다. 

아직 Next 버튼이 없어서 Begin 버튼 클릭시 항상 첫번째 문제가 실행되고 있다. image 가 있는 두번째 문제를 실행해보기 위해서 임으로 문제 시작번호를 수정해서 테스트 결과를 확인해보자. 

이제 텍스트와 동일하게 이미지 보기도 적용된 것을 확인 할수 있다. 

 

다음 진행을 위해서 activeQuestion = 0 으로 다시 수정한다.