點擊設置不同的類（以最多的AngularJS方式）

我目前正在學習AngularJS並已經開始了一個小項目，這個項目基本上是我的一個老項目，在jQuery中完成。點擊設置不同的類（以最多的AngularJS方式）

到目前爲止所有的事情都很好，但最後幾個小時我把我的頭圍繞在這個區域。在jQuery中回來5分鐘，但我不知道AngularJS中最好的方法是什麼）

這是我的jQuery：日曆視圖。它會在點擊時打開和關閉幾天。點擊一天後，即可獲得課程opened。還有國家locked，在那裏我禁用打開一天。

$('.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'); 
      } 
     } 
});

下面是標記：

<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>

所以我的問題是 - 什麼是最AngularJS辦法做到這一點？

來源

2013-05-30 flrnz

還可以考慮將其創建爲組件。 http://angularjs.org/#create-components和http://docs.angularjs.org/guide/directive – katranci

thx的提示 - 指令在我的角度路線圖上，但對我來說太複雜了（見我上面的基本問題）:) – 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）更改模型的屬性（待辦事宜示例中的done）。

Angular會響應點擊調用您的作用域代碼，然後根據對模型的更改更新元素。

來源

2013-05-30 08:30:31

嗨，我現在感到很蠢。我自己做了這個教程 - 但從來沒有得到這個抽象的想法來使用這個簡單的任務。它起作用了，我的第一次嘗試就變得更清潔更簡單！ – flrnz

@ flrnz：不要感到愚蠢，我們都在那裏。很高興這有助於！ –

點擊設置不同的類（以最多的AngularJS方式）

回答

相關問題