안녕하세요 슬릭데브 입니다 ^^
오늘은 더위가 풀리고 시원한 날씨네요!
저번 글에서는 데이터를 Create 하는 방법을 배웠습니다.
CRUD (Create, Read, Update, Delete) 중에서 Read 와 Create 을 순서대로 해봤습니다.
그럼 오늘은 Update를 배워보겠습니다.
마찬가지로 예제를 통해서 배워보겠습니다!
메뉴화면에서 수정할 메뉴가 있으면 클릭을 하는게 자연스럽겠죠.
클릭을 하면 작은 창이 나와서 메뉴 이름과 가격을 수정할 수 있어야 합니다.
아래 화면과 같이 나왔으면 합니다.
이런걸 Modal 이라고 합니다.
Dialog 랑 Modal 이 비슷한 개념이긴 한데
Modal은 입력값이나 닫기버튼을 꼭 실행해줘야 메인 화면에서 작업을 할 수 있습니다.
Dialog는 그냥 팝업 창이라서 무시해도 메인화면에서 작업을 할수 있습니다.
searchrestaurant.html
헤드 태그는 바뀐게 파일 경로 하나뿐입니다. 나머지는 동일해요!
바디 태그에서는 저번글과 똑같지만 빨간줄 부분만 새로 추가했어요.
ng-click 은 메뉴를 클릭했을때 어떤 function을 호출할지 설정합니다.
Firebase에서 사용하는 Id 번호를 function에 넘겨줍니다. 그래야 어떤 메뉴가 선택됐는지 알수 있어요.
data-target 이라는 부분은 html 코드에서 어느부분이 사용될지 정해줍니다.
저희가 modal을 사용하기 때문에 modal id를 editModal 로 정했습니다. 아래 화면처럼요!
이 화면이 Modal 코드입니다. id 를 editModal 로 지정했습니다.
그리고 메뉴이름 이라는 부분 밑에 text area 가 있습니다. 여기다가 ng-model 로 클릭한 데이터를 불러와야 합니다.
메뉴가격 부분도 똑같이 클릭한 데이터를 불러옵니다.
밑에 빨간 박스는 Modal 에서 쓰는 버튼입니다.
mainApp.js
그럼 이제 컨트롤러를 봅시다!
FirebaseObject 를 새로 추가했습니다!
이 부분은 저번글과 동일합니다.
여기서 마우스로 클릭했을때 메뉴 id를 Firebase로 부터 가져왔습니다.
Html에서 클릭할때 ng-click 부분을 setSelected를 호출했습니다.
그 밑에 Create 부분은 저번글과 같습니다!
윗 화면은 update function 입니다.
마우스로 클릭할때 받아온 id를 이용해서 firebase있는 데이터를 변수에 저장합니다.
그 후 editedItem 이라는 변수를 firebaseObject로 만들어줘야 수정이 가능합니다.
메뉴이름과, 가격을 입력한 값으로 변경하고 $save 를 호출합니다.
그럼 Firebase에 저장되고 변경된 것을 볼 수 있는데 유저의 편의를 위해서 Modal을 숨깁시다.
오늘은 여기까지 배웠습니다.
다음에는 Delete (삭제) 하는 방법을 배우겠습니다.
삭제하는 방법을 배우고 나면 로그인 화면도 만들어보고
firebase에서 유저 관리하는것도 알아보겠습니다.
그 후에는 아이디어가 생각나면 웹앱을 만들어 보겠습니다.
질문이나 앞으로 나아갔으면 하는 바램이 있으시면 꼭 댓글을 남겨주세요!
감사합니다.
//슬릭데브
