Динамически добавлять классы в смежные элементы на mouseenter

Question

Я создаю сетку элементов и накладываю эффект наведения с использованием переходов CSS для каждого элемента. Я хотел бы добавить вторичные эффекты для смежных элементов оси x и y, создавая эффект облака. Я предполагаю, что я буду ссылаться на эти элементы, используя методы jQuery next() и prev(), или $ index и $ parent. $ Index.

Площадь сетки будет достаточно большой, чтобы предотвратить обертывание строк (с использованием отрицательных полей и скрытого переполнения).

Вот упрощенный пример моего повтора:

<div class="activity-thumb-row" ng-repeat="i in getNumArray(20) track by $index"> 
    <div class="activity-thumb" 
     ng-class="{'adjacent': adjacent}" 
     ng-repeat="j in getNumArray(30) track by $index" 
     ng-mouseenter="highlightActivities()"> 
    </div> 
</div> 

И функция в контроллере (я понимаю, не может быть лучшим подходом):

$scope.highlightActivities = function() { 
    $(this).next().adjacent = true; 
    $(this).prev().adjacent = true; 
} 

Как ориентировать элементы рядом с зависающим элементом, используя ng-класс (или что-то еще) внутри ng-repeat?

Here's a fiddle for fiddling.

Для справки, вот некоторые связанные обсуждения:

• Change class on mouseover in directive
• Angular js ng repeat with conditional ng class not applying css class
• ng-mouseover and leave to toggle item using mouse in angularjs

Answer 1

Вот директива, которая вычисляет все индексы соседних ячеек и добавляет соседний класс, используя только JQuery .. не ng-класс.

Подразумевается, что строки будут заворачивать, нужно будет регулировать для отдельных элементов строки

.directive('activityThumb', function() { 
    return { 
    restrict: 'C', 
    link: function(scope, elem) { 
     elem.bind('mouseenter', function(e) { 

     var elW = elem.width(), 
      $parent =elem.parent(), 
      parentW = $parent.width(), 
      $items = $parent.children(), 
      numItems =$items.length 
      itemsPerRow = Math.floor(parentW/elW), 
      idx = elem.index(), 
      rowIndex = idx % itemsPerRow; 
     /* object of various indices , easy to inspect*/ 
     var adjacentIdx = { 
      top:  idx > itemsPerRow ? idx - itemsPerRow : false, 
      right: rowIndex != itemsPerRow ? idx + 1 : false, 
      left: rowIndex > 0 ? idx - 1 : false, 
      bottom: (numItems - idx) > itemsPerRow ? idx + itemsPerRow : false 
     } 
     console.dir(adjacentIdx); 
     $items.removeClass('adjacent') 
     $.each(adjacentIdx, function(position, index){ 
      if(index !== false){ 
      $items.eq(index).addClass('adjacent'); 
      } 
     }); 

     }); 
    } 
    } 

}); 

Это не займет много настройки, чтобы удалить JQuery зависимости либо.

Также потребуется дополнительное указание на родителей, чтобы удалить лишние классы, когда мышь покидает главный родитель одного из краев

DEMO

Answer 2

Во-первых, это не очень хорошая идея, чтобы иметь дело ш с элементами DOM в контроллере.

Кроме того, эта проблема, по-видимому, связана главным образом с дизайном и не связана с функциональностью. Поэтому я попытался бы сохранить логику в представлении, а не в контроллере.

Есть 2 способа решения с видом конкретной логики: 1) с использованием пользовательских директив или 2) Просмотреть определенные переменные области действия

Второй подход может работать здесь и кажется, самый дешевый подход, но и немного некрасиво. Он ng-init х годов rowHighlight массив в объеме и множеств, выделен элемент:

<div ng-repeat="i in getNumArray(20) track by $index" ng-init="rowHighlight = []"> 
    <div class="activity-thumb" 
     ng-repeat="j in getNumArray(30) track by $index" 
     ng-class="{'adjacent': rowHighlight[$index-1] || rowHighlight[$index+1]}" 
     ng-mouseenter="rowHighlight[$index] = true" 
     ng-mouseleave="rowHighlight[$index] = false"> 
    </div> 
</div> 

updated fiddle