javascript - クリック時に異なるクラスを設定する (最も AngularJS の方法で)

Question

私は現在AngularJSを学んでおり、すでに小さなプロジェクトを開始しています。これは基本的に私の古いプロジェクトであり、jQueryで行われています。

これまでのところすべて順調ですが、最後の数時間はこの領域について頭を抱えていました。jQueryでは5分前ですが、AngularJSで何が最善の方法なのかわかりません)

これが私のjQueryです：カレンダービュー。クリックで日を開閉します。1 日 1 回クリックすると、クラスが取得されます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の方法は何ですか?