클릭 할 때 다른 클래스 설정 (가장 AngularJS 방식으로)

저는 현재 AngularJS를 배우고 있으며, 이미 jQuery에서 수행 된 기본적으로 오래된 프로젝트 인 작은 프로젝트를 시작했습니다.클릭 할 때 다른 클래스 설정 (가장 AngularJS 방식으로)

지금까지는 모든게 좋았지 만 지난 시간에 나는이 영역에서 머리를 감쌌다. jQuery에서 5 분 후에 AngularJS에서 가장 좋은 방법이 무엇인지 전혀 모르겠습니다.)

다음은 내 jQuery : 일정보기입니다. 클릭 한 번으로 열리고 닫힙니다. 하루에 클릭하면 클래스 opened이됩니다. 또한 locked 상태가 있습니다. 여기서 하루를 열지 못하게합니다. - 그것을 할 수있는 가장 AngularJS와 방법은 무엇

그래서 내 질문은

<ul class="mod"> 
    <li class="mod-item"> 
     <div class="mod-item-day opened"><span>1</span></div> 
     <div class="mod-item-content"> 
      <img src="../images/present1_late.jpeg" alt=""> 
     </div> 
    </li>

: 여기

$('.mod-item').on('click', function(){ 
     if ($(this).find('.mod-item-day').not('.locked')) { 
      if($(this).find('.mod-item-day').hasClass('open')){ 
       $(this).find('.mod-item-day').removeClass('open').addClass('opened'); 
      }else{ 
       $(this).find('.mod-item-day').addClass('open'); 
      } 
     } 
});

는 마크 업인가?

출처

2013-05-30 flrnz

또한 구성 요소로 생성하는 것이 좋습니다. http://angularjs.org/#create-components 및 http://docs.angularjs.org/guide/directive – katranci

팁 - 지시어는 제 각도 로드맵에 있지만 지금은 너무 복잡합니다 (참조 :) 내 기본 질문 위의 :) – flrnz

기본적으로 Angular 웹 사이트의 the To Do example에 나와 있습니다.

오늘의 div에

, ng-click="callbackInYourScopeCode()"를 지정합니다. 수행 할 작업의 예는 다음과 같습니다. ng-click="archive()"
하루의 div의 class에는 모델의 속성이 포함됩니다. 해야할 일 예에서, 예를 들어 <span class="done-{{todo.done}}">{{todo.text}}</span>이 있습니다. 속성 todo.done에 유의하십시오.
범위 코드에서 모델의 속성 (callbackInYourScopeCode)이 To Do 예에서 변경됩니다.

각도는 클릭에 대한 응답으로 범위 코드를 호출 한 다음 모델 변경 사항을 기반으로 요소를 업데이트합니다.

출처

2013-05-30 08:30:31

안녕하세요, 지금 바보 같아요. 튜토리얼을 독자적으로 곁들여 보았습니다. 그러나이 간단한 작업을 위해 이것을 사용하는 추상적 인 생각을 결코 얻지 못했습니다. 그것은 첫 번째 시도만큼 효과적이고 훨씬 더 간단하고 간단합니다! – flrnz

@ flrnz : 바보 같은 짓하지 마라, 우리 모두 거기에 있었다. 다행이 도움이! –

클릭 할 때 다른 클래스 설정 (가장 AngularJS 방식으로)

답변

관련 문제