在悬停AngularJS上更改元素颜色

Question

所以,我刚刚开始使用angularjs,我已经很困惑了.我想更改列表元素的颜色,该列表元素对应于数组中的十六进制代码颜色.我尝试了一些东西,但我无法得到它.

到目前为止,这是我的代码:
HTML

<div id="mainContentWrap" ng-app="newApp">
 <div id="personContainer" ng-controller="personController">
<ul id="personList">
    <li class="bigBox no_s" ng-style="personColour"  ng-repeat="i in persons" ng-hover="changeColor()">< href="#/{{i.person_id}}">{{i.person_name}}</a></li>
</ul>

使用Javascript:

var app=angular.module('newApp',[]);
app.controller('personController',function($scope,$rootScope){
    $rootScope.persons=[
        {person_id:'0',person_name:'Jim',colour:"cc0000"},
        {person_id:'4',person_name:'Bob',colour:"f57900"},
        {person_id:'2',person_name:'James',colour:"4e9a06"},
        {person_id:'9',person_name:'Paul',colour:"3465a4"},
        {person_id:'3',person_name:'Simon',colour:"77507b"}
    ];
    $scope.changeColor(){
        $scope.personColour=$scope.persons.color// not sure what to do here???
    }
});

Answer 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');
                });
        }
    };
}]);

Answer 2

如果你想hack留在视图中：

<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>