본문 바로가기

Angular Js

양재동 코드랩 강의-4

728x90

# ng-click

button directive에 추가하며, 클릭했을 때 동작하는 것을 handler라고 하는데 angular js에서는 ng-click이라고 한다.


 

ng-click에 remove라는 함수를 넣어 삭제를 클릭했을 때 목록이 사라지는 이벤트를 발생시키려고 한다.

remove라는 함수를 TodoCtrl4에 정의하면 된다 !

 

.html

삭제 해야 할 개체를 넘겨주어야 하므로 remove(todo1)을 작성하면 된다.

코드 자체가 ng-repeat 반복문에 의해 todos라는 배열에 있는 하나의 todo1에 접근할 수 있기 때문에 todo1을 넘겨준다.

 

.js
todos라는 함수를 scope변수에 할당했듯이 똑같이 scope변수에 remove라는 함수를 만들어주면 된다.

remove 함수에서 html에서 넘겨준 개체를 받기 때문에 todo1을 작성하면 된다.

위의 함수를 만들면, 삭제를 눌렀을 때 팝업창이 뜬다!

 

이제 삭제하려는 함수를 제대로 만들어 보자면,

javascript중에 findIndex라는 함수가 있는데 이 함수를 통하여 인덱스를 찾는 함수를 만든다.

item의 id과 todo1의 id가 같으면 idx를 return한다.

 

만약, idx가 찾아지면 -1보다(-1:오류) 큰 인덱스가 나타나므로 if문 조건을 저렇게 두고, 

배열에서 찾은 idx에서 하나를 제거한다는 뜻

**splice(시작점, 지울개수, 시작점부터 지울개수까지 지우고 그 자리에 넣을것)

 

그럼 이런식으로 삭제가 된다~

어렵다..

728x90