To take it a step further

Question

65

Changing Element Colour on Hover AngularJS

rated 0 times [ 70] [ 5] / answers: 1 / hits: 43803 / 10 Years ago, sat, june 14, 2014, 12:00:00

So, I'm just getting started with angularjs and I'm already confused. I want to change the colour of a list element that corresponds to a hex code colour that is in an array. I've tried some stuff but I just can't get it.

Here's my code so far:

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

    }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

susanajamiep

Add To Favorites

Follow

Total Points: 466

Total Questions: 113

Total Answers: 108

Location: Liberia

Member since Fri, Oct 22, 2021

3 Years ago

susanajamiep questions

1 how can I add menu button in telegram bot

Sun, Jun 12, 22, 00:00, 2 Years ago

1 'TypeError: Cannot set properties of undefined (setting '0')'----Array assignment

Sat, Apr 16, 22, 00:00, 2 Years ago

1 Setting cors in strapi 4

Mon, Mar 7, 22, 00:00, 2 Years ago

1 Dynamic import of react hooks

Wed, Jun 10, 20, 00:00, 4 Years ago

1 React Hook useEffect issue with setState

Fri, Jan 24, 20, 00:00, 4 Years ago

View All

answered 10 Years ago dorothylorrainef · Accepted Answer

There is no ng-hover directive. You'll want to use ng-mouseenter and ng-mouseleave.

Also, keep in mind that the syntax for ng-style is an object corresponding the CSS key-value pairs.

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

$scope.changeColor = function(person) {

    $scope.personColour = {color: '#'+person.colour};

};

If you'd like for the color to change back to what it was before you hovered, you can create two functions, or pass a parameter to $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

    }

};

To take it a step further

You could create a directive for each person.

<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');

                });

        }

    };

}]);