Ответ 1

Нет директивы ng-hover. Вы хотите использовать ng-mouseenter и ng-mouseleave.

Кроме того, имейте в виду, что синтаксис для ng-style - это объект, соответствующий парам ключ-значение CSS.

<li ng-repeat="i in persons" ng-style="personColour" ng-mouseenter="changeColor(i)"></li>

$scope.changeColor = function(person) {
    $scope.personColour = {color: '#'+person.colour};
};

Если вы хотите, чтобы цвет изменился до того, что он был до того, как вы нависнете, вы можете создать две функции или передать параметр в значение $scope.changeColour:

<li ng-repeat="i in persons" ng-style="personColour" ng-mouseenter="changeColor(i,true)" ng-mouseleave="changeColor(i,false)"></li>

$scope.changeColor = function(person, bool) {
    if(bool === true) {
        $scope.personColour = {color: '#'+person.colour};
    } else if (bool === false) {
        $scope.personColour = {color: 'white'}; //or, whatever the original color is
    }
};

Чтобы сделать это еще дальше

Вы можете создать директиву для каждого человека.

<person ng-repeat="i in persons"></person>

// your module, then...
.directive('person', [function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<li class="bigBox no_s"><a href="#/{{i.person_id}}">{{i.person_name}}</a></li>',
        link: function(scope, elm, attrs) {
            elm
                .on('mouseenter',function() {
                    elm.css('color','#'+i.colour);
                })
                .on('mouseleave',function() {
                    elm.css('color','white');
                });
        }
    };
}]);

Ответ 2

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

<li ng-style="( (isOver == 'true') && (linkToActive == 'm1')  ) ? { 'background-color': '#00bdcb' } : {'background-color': '#ededed'}"
ng-mouseenter="vm.changeColorMenu('m1','true')" ng-mouseleave="vm.changeColorMenu('m1','false')">
</li>

<li ng-style="( (isOver == 'true') && (linkToActive == 'm2')  ) ? { 'background-color': '#00bdcb' } : {'background-color': '#ededed'}"
ng-mouseenter="vm.changeColorMenu('m2','true')" ng-mouseleave="vm.changeColorMenu('m2','false')">
</li>

</ul>

Код Javascript

function changeColorMenu(indexMenu,bool)
    {
        $scope.isOver = bool;
        $scope.linkToActive = indexMenu;
    }

Ответ 3

Если вы хотите взломать пребывание в представлении:

<div ng-repeat="n in [1, 2, 3]" ng-style="{ 'background': (isHover ? '#ccc' : 'transparent') }" ng-mouseenter="isHover = true;" ng-mouseleave="isHover = false;">
 <span>{{ n }}</span>
</div>

Ответ 4

Если вы проверите пример здесь, вы увидите, что директива ng-style ждет css-стиля, а не только значения, поэтому в вашем случае это будет:

$scope.person.colourStyle={'background-color':$scope.persons.color}

и в html это будет:

<li class="bigBox no_s" ng-style="i.colourStyle"  ng-repeat="i in persons" ng-hover="changeColor()">< href="#/{{i.person_id}}">{{i.person_name}}</a></li>

редактировать:

И вам также нужно установить значение цвета в полный гекс, например: '# cc0000'.

Ответ 5

В Angular нет директивы ng-hover, поэтому вы должны использовать ng-mouseenter & ng-mouseleave для имитации.

<ul id="personList">
    <li class="bigBox no_s" ng-style="personColour" 
        ng-repeat="i in persons" ng-mouseenter="changeColor($index)" 
        ng-mouseleave="recoverColor($index)">
            <a href="#/{{i.person_id}}">{{i.person_name}}</a>
    </li>
</ul>

И вы должны использовать $index чтобы получить свой элемент в лицах Array

$scope.changeColor = function() {
    $scope.personColour = { 'color': '#' + $scope.persons[$index].color };
                           // or 'background-color' whatever you what
}

$scope.recoverColor = function() {
    $scope.personColour = {};
}

Ответ 6

Смотрите демонстрацию Plunker здесь

Используйте ng-стиль для условного применения стилей CSS - я выбрал этот стиль 'personStyle'. Затем привяжите событие ng-mouseover, чтобы установить personStyle фона personStyle для атрибута цвета человека. Наконец, свяжите событие ng-mouseleave, чтобы сбросить personStyle когда мышь покидает элемент. Для этого решения функция changeColor() не требуется.

<div id="personContainer" ng-controller="personController">
  <ul id="personList"> 
    <li class="bigBox no_s" ng-repeat="i in persons" ng-style="personStyle">
      <a href="#/{{i.person_id}}" ng-mouseleave="personStyle={}" 
             ng-mouseover="personStyle={ 'background-color':'#' + i.colour}">
             {{i.person_name}}</a>
    </li>
   </ul>
</div>