[Angular.js][앵귤러js] AngularJS 6일차 [HTML DOM, Directive, ng-disabled, ng-show, ng-hide, ng-click]

안녕하세요 슬릭데브 입니다.

오늘은 어제에 이어서 테이블을 이용하면서 앵귤러 directive들 중에 자주 쓰이는것을 배워보겠습니다.

---

밑에 앵귤러 directive들은 HTML DOM(document object model)에 앱 데이터를 바인드 시켜줄 수 있습니다.

• ng-disabled : 현재 컨트롤을 해제합니다.
• ng-show : 현재 컨트롤을 보여줍니다.
• ng-hide : 현재 컨트롤을 숨깁니다.
• ng-click : 앵귤러 클릭 이벤트를 활성화 합니다.

아직은 무슨 말인지 잘 모르겠지만 예제를 통해서 배워봅시다.

---

ng-disabled 디렉티브를 HTML 버튼과 바인드 시켜봅시다.

위 그림과 같이 하면 checkbox를 클릭하면 버튼이 해제됩니다.

ng-show 디렉티브를 HTML 버튼과 바인드 시켜봅시다.

위 그림과 같이 하면 글씨옆에 버튼이 없다가 checkbox 클릭해주시면 버튼이 보입니다.

ng-hide 디렉티브를 HTML 버튼과 바인드 시켜봅시다.

위 그림과 같이 하면 글씨옆에 버튼이 있다가 checkbox 클릭과 동시에 버튼이 사라집니다.

ng-click 디렉티브를 HTML 버튼과 바인드 시켜봅시다.

위 그림과 같이 하면 버튼을 누를때마다 클릭수가 계산이 됩니다.

---

그럼 어제 배운 테이블과 합쳐서 아래 그림과 같이 만들어 보겠습니다.

비밀메뉴를 눌렀을때 ng-show를 이용해서 주문하기 버튼이 나오게 합니다.

인기없는 메뉴를 눌렀을때 ng-disabled 를 이용해서 주문하기 버튼을 못누르게 해제합니다.

최악의 메뉴를 눌렀을때 ng-hide를 이용해서 버튼을 없애야합니다.

그리고 마지막으로 클릭하기 버튼을 누르면 ng-click을 이용해서 클릭수가 올라가게 합니다.

이렇게 만들어 봅시다.

---

소스코드는 아래와 같이 해볼수 있습니다.

오늘은 여기까지 하겠습니다.

혹시 질문이나 궁금한게 있으시면 댓글로 남겨주세요. 24시간 이내에 답변 드리겠습니다.

감사합니다.

//슬릭데브