2

Есть несколько строк <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');
    });
});

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

3 ответа 3

2

angular.module('app', [])

.controller('MainCtrl', MainCtrl);

MainCtrl.$inject = ['$scope'];

function MainCtrl($scope) {
  
  $scope.values = [
    
    { buy: '0/10' }, 
    { buy: '0/20',selected: true }, 
    { buy: '0/30'}
    
  ];

  $scope.hoverIn = function() {
    this.hover = true;
    $scope.values.forEach(function(val) {
      val.selected = false;
    });

  };

  $scope.hoverOut = function() {
    this.hover = false;
  };

}
.selected {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<table ng-app="app" ng-controller="MainCtrl">
  <tr ng-repeat="value in values" ng-class="{'selected' : hover || value.selected}" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
    <td class="buy" ng-bind="value.buy"></td>
  </tr>
</table>

1

При помощи ng-class и ng-mouseenter: fiddle

HTML:

<tr class="list" ng-repeat="item in items" ng-mouseenter="selected.id = item.id">
    <td class="buy">{{item.name}}</td>
    <td>
        <a href="" class="buy-button" ng-class="{buyButtonSelected: selected.id === item.id}">Купить</a>
    </td>
</tr>

Контроллер:

$scope.items = [
    {id: 1, name: 'товар 1'}, 
    {id: 2, name: 'товар 2'},
    {id: 3, name: 'товар 3'}, 
    {id: 4, name: 'товар 4'},
    {id: 5, name: 'товар 5'}, 
    {id: 6, name: 'товар 6'}
];

$scope.selected = {id: 3};
1
  • Good example with stateful. I will take on note.
    – romeo
    26 окт 2015 в 16:13
0

В AngularJS есть частичная замена jQuery - jqLite, возможностей которого достаточно для выполнения вашей задачи

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.