在懸停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

在下面的代碼中，我添加了簡單的代碼，以了解如何使用條件激活樣式。 我希望能幫助你

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

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

Answer 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'。

Answer 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來獲取人物數組中的元素

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

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

Answer 6

請參閱此處的Plunker演示

使用ng-style有條件地應用CSS樣式 - 我選擇將此樣式命名為'personStyle' 。 接下來，綁定ng-mouseover事件以將personStyle background-color設置為person的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>