Question

我写了一个小方法来切换一个组中的一个CSS类。它一次只允许一个元素拥有该类。这些元素不是列表，也不一定有共同的父元素。对它们进行分组的唯一方法是使用常见的CSS类。

我正在使用Angular 1.5项目并尝试让Angular完成它的工作。是否有一种首选的方式来处理角度爱好者？所有doc示例都使用一个元素或使用ngRepeat和$ index。

这是一个例子，说明这与CodePen上的jQuery的toggleClass（）不同

感谢。：）

标记

<div class='thing'>one</div>
<div class='thing'>two</div>
<div class='thing'>three</div>
<div class='thing'>four</div>
<div class='thing'>five</div>

式

.active
    color: red

jQuery插件

$.fn.toggleBetween = function(className) {
    var $element = this;
    $element.on('click', function() {
        var $target = $(this);
        var currentlyActive = $target.hasClass(className);
        if ( currentlyActive ) {
            $target.removeClass(className);
        } else {
            $element.removeClass(className);
            $target.addClass(className);
        }
    });
    return this;
};

$('.thing').toggleBetween('active');

Answer 1

我可能会参加这里的活动。

绑定click，如果单击没有类的元素，则在根范围内发出事件以关闭所有其他元素并开始侦听该事件（因此，如果选择其他元素，则将取消选择）。

app.directive('toggleFamily', function($rootScope) {
  return {
    link: function(scope, elem, attrs) {
      function listen() {
        var bind = scope.$on('removeToggle', function(event) {
          elem.removeClass('toggled');
          bind();
        });
      }

      elem.bind('click', function() {
        if (elem.hasClass('toggled')) {
          elem.removeClass('toggled');
        } else {
          $rootScope.$broadcast('removeToggle');
          elem.addClass('toggled');
          listen();
        }
      });
    }
  };
});

http://plnkr.co/edit/4sU9xayMOFa3reQNESGP?p=preview

请注意。通常你想拥有视图中所有东西的模型。但是，如果你想要“所有元素无处不在”，那么你可以为所选元素存储什么？ ID？没有... 但是，如果这个元素的类型是固定的，就像你有： <div>{{person.name}}</div>然后你可以存储person.id并使用ng-class。这会迫使你在“顶级”的上面建立一些模型。

jQuery切换类|一次许多之一 - Angular方式（不是ngRepeat）

1 个答案: