Angularjs: How to apply a CSS property to a single element generated by ng-repeat directive

Question

I'm generating some div tags with the ng-repeat directive. What I'd like is that when the user hovers over one of the div tags, only that div tag will change its background. However, as it stands, when the user hovers over the tag, all the ng-repeat generated elements have the property applied to them.

Here's my code for the element:

    <div class="col-xs-12">
        <div class="row">
            <div ng-repeat="verb in verbArray | filter: filterText" class="col-xs-12 col-sm-3" 
             ng-mouseenter="changeColor(true)" ng-mouseleave="changeColor(false)"
             ng-style="highlightColor">
                {{verb.name}}<img src="{{verb.presentImage}}"/><img src="{{verb.pastImage}}"/>
            </div>
        </div>
    </div>

Here is the changeColor function in the controller

    $scope.changeColor = function(theBool) {
        if(theBool === true) {
            $scope.highlightColor = {'background-color': 'green'};
        } else if (theBool === false) {
            $scope.highlightColor = {'background-color': 'white'}; //or, whatever the original color is
        }
    };

How can I make it so that the only thing that has the changeColor function applied is the element that's being hovered over?

Thank You for the help

Edit: If I did it with CSS, would it work like this:

            <div ng-repeat="verb in verbArray | filter: filterText" class="col-xs-12 col-sm-3" 
             ng-mouseenter="changeColor(true)" ng-mouseleave="changeColor(false)"
             ng-style="highlightColor" class="classOne">
                {{verb.name}}<img src="{{verb.presentImage}}"/><img src="{{verb.pastImage}}"/>
            </div>
        </div>

CSS file

.classOne:hover {
 background-color: green;
}

How about adding a custom attribute and populating it via $index. Then target the one you wish tp — Tushar Gupta
– Tushar Gupta, Commented Apr 16, 2017 at 20:53
@Tushar. I'm sorry. I'm very new to AngularJS and Javascript in general. I don't really know the ins and outs of the language yet. How do I make a custom attribute? How do I use this $index service. Do I need to inject it into my controller? — The_Questioner
– The_Questioner, Commented Apr 16, 2017 at 21:02
@Tushar. I got it to work through CSS. However, I'm curious about the method you mentioned. I think it may come in handy in the future. Could you please let me know where I might find more information about this topic? Thanks — The_Questioner
– The_Questioner, Commented Apr 16, 2017 at 21:46

Andrei Voicu · Accepted Answer · 2017-04-16 21:12:59Z

2

You can use CSS to obtain this effect with the :hover selector (https://www.w3schools.com/cssref/sel_hover.asp)

like this:

div:hover {
    background-color:green;
}

doing this through CSS is generally faster than using Angular to do it.

answered Apr 16, 2017 at 21:12

Andrei Voicu

7501 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

The_Questioner Over a year ago

Thanks, but how do select a div to apply it to. Should I assign the div with the ng-repeat in a CSS class and apply it to that class?

Andrei Voicu Over a year ago

Yes, that is a great idea, you could name it something like .listitem and apply the CSS rule on .listitem:hover

Collectives™ on Stack Overflow

Angularjs: How to apply a CSS property to a single element generated by ng-repeat directive

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related