Как добавить класс при наведении на блок в Angular?

Question

[Eugene Zalivadnyi]

Есть несколько строк tr:

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

Нужно чтобы по умолчанию подсвечивалась только первая (класс buyButtonSelected), а при наведении на любую из строк - подстветка оставалась только у той, на которую навели в последний раз, при этом у всех остальных подстветку нужно убрать.

На JQuery это звучало бы приблизительно так:

$( 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');
    });     
});

Проект написан на Angular и возможности использовать JQuery нет. Есть ли подобный функционал у Ангуляра? Как это реализовать?

Answer 1

[VanKrock]

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";
  }
}

ну и просто меняете buttonsCss у product на нужный вам

залил на JsFiddle

Comments

[Eugene Zalivadnyi]

А как сделать, чтобы первый элемент был красным по умолчанию, без наведения?

[Eugene Zalivadnyi]

Так ведь получается, что здесь количество строк фиксировано, а оно динамическое. И передавать их в контроллер ангуляра не вариант.

[VanKrock]

Агнаман Шаманский: Просто, когда инициализаруете массив products, указываете первый элемент red

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

ну или после загрузки сразу
if(products.length)
products[0].buttonCss = "red";

Себе ответил
Нет, не фиксировано, с чего вы взяли? Объявить массив вы можете как хотите, хоть с сервера загрузить

[VanKrock]

Агнаман Шаманский:
$scope.addProduct = function(name, count){
$scope.products.push({name:name, count:count, buttonCss:"green"});
}

[VanKrock]

Агнаман Шаманский: И не забываете про область видимости buyCtrl и его $scope

Answer 2

[Николай]

Думаю тут можно обойтись связкой ng-mouseover и ng-class. На mouseover сохраняем в некоторой переменной, например $scope.currentIndex значение текущей строки( если вывод делается через ng-repeat - то подойдет $index) . В ng-class добавляем класс, в том случае, когда $index равен currentIndex.