【问题标题】：Changing Element Colour on Hover AngularJS在悬停AngularJS上更改元素颜色
【发布时间】：2016-12-13 15:13:09
【问题描述】：

所以，我刚刚开始使用 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???
    }
});

【问题讨论】：

标签： javascript angularjs

【解决方案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】：

如果你想~~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>

【讨论】：

【解决方案3】：

在下面的代码中，我添加了简单的代码来了解如何根据条件激活样式。希望对你有帮助

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

【讨论】：

【解决方案4】：

如果您查看示例 here，您会看到 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 来获取persons Array中的元素

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

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

【讨论】：

【解决方案6】：

See Plunker Demo Here

使用 ng-style 有条件地应用 CSS 样式 - 我选择将此样式命名为 'personStyle'。接下来，绑定 ng-mouseover 事件以将personStyle background-color 设置为人物的颜色属性。最后，绑定 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>

【讨论】：