How to add a class when hovering over a block in Angular?

Question

Angular

There are several tr lines:

<tr class="list">
    <td class="buy">0/10</td>
    <td><a class="buy-button">Купить</a></td>
</tr>

It is necessary that only the first one is highlighted by default (buyButtonSelected class), and when hovering over any of the rows, the highlight remains only for the one that was hovered over for the last time, while all the rest should be unlit.
In jQuery it would sound something like this:

$( document ).ready(function() {
    $('#content1 tr.list:nth-of-type(1) .buy-button').addClass('buyButtonSelected');
    $('#content1 tr.list').hover(function(){    
        $('#content1 tr.list').removeClass('buyButtonSelected');
        $(this).addClass('buyButtonSelected');
    });     
});

The project is written in Angular and there is no way to use JQuery. Does Angular have similar functionality? How to implement it?

Answer 1

angular.ru/api/ng.directive:ngClass
HTML

<div ng-app>
<table ng-controller="buyCtrl">
<tr ng-repeat="product in products" ng-mouseover="productHovered($index)">
    <td >{{product.name}}</td>
    <td class="buy">{{product.count}}/10</td>
    <td><a ng-class="product.buttonCss">Купить</a></td>
</tr>
</table>
</div>

css

.red{
    color:red;
}

.green{
    color:green;
}

JavaScript

function buyCtrl($scope) {
  $scope.products = [
    {name:'Помидоры', count:1, buttonCss:"green"},
    {name:'Огурцы', count:0, buttonCss:"green"},
    {name:'Картофель', count:0, buttonCss:"green"}
  ];
    
  $scope.productHovered = function(selectedProductIndex){
      $scope.products.forEach(function(product){
          product.buttonCss = "green";
      });
      $scope.products[selectedProductIndex].buttonCss = "red";
  }
}

well, just change the buttonsCss of the product to the one you need uploaded
to JsFiddle

Answer 2

I think here you can get by with a bunch of ng-mouseover and ng-class. On mouseover, we save the value of the current line in some variable, for example $scope.currentIndex (if the output is done through ng-repeat, then $index will do) . In ng-class we add a class in the case when $index is equal to currentIndex.