javascript - 单击时设置不同的类(以最 AngularJS 的方式)

Question

我目前正在学习 AngularJS，并且已经开始了一个小项目，这基本上是我的一个旧项目，用 jQuery 完成的。

到目前为止一切都很好，但最后几个小时我一直在思考这个领域。当时在 jQuery 中需要 5 分钟，但我不知道 AngularJS 中最好的方法是什么)

这是我的 jQuery:日历 View 。点击后即可打开和关闭几天。单击一天后，类就会打开。还有一个状态锁定，我根本无法打开这一天。

$('.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 的方式是什么？

Answer 1

您基本上按照 the To Do example 中所示的方式执行此操作在 Angular 网站上。

1. 当天 div ，指定ng-click="callbackInYourScopeCode()" 。在“待办事项”示例中，它是 ng-click="archive()"

2. 当天 div的class ，包括模型中的属性。例如，在“待办事项”示例中，有 <span class="done-{{todo.done}}">{{todo.text}}</span> 。注意属性todo.done .

3. 在您的作用域代码中，让函数 ( callbackInYourScopeCode ) 更改模型的属性(“待办事项”示例中的 done )。

Angular 将调用您的范围代码来响应点击，然后根据模型的更改更新元素。