Selecting only one child element in AngularJS with jquery

Question

So, I had a working function in jQuery but then I decided to use Angular for my application. Just can't find the way so it adds the CSS to only one child element.

Jquery code that was working

$('.list-div').on('mouseenter', function(){
    $(this).find('.client-jar').css('opacity','1');
  }).on('mouseleave', function() {
    $(this).find('.client-jar').css('opacity','0');
  });

Current html

<ul>
        <li ng-repeat="one in ones | orderBy:'-date'">
            <div class="list-div">
                <div class="row jar-div first-jar-div" ng-mouseover="showButton()" ng-mouseleave="hideButton()">
                    <div class="col-xs-7 description-div">
                        <p class="version">{{ one.version }}</p>
                        <p class="date">{{ one.date }}</p>
                    </div>
                    <div class="col-xs-5 buttons-div">
                        <div class="list-button client-jar">
                            <a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
                        </div>
                        <div class="list-button server-jar">
                            <a class="list-link">Server jar</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>

And Current Angular JS

$scope.showButton = function(){
    angular.element('.list-div').find('.client-jar').css('opacity','1');
  };

  $scope.hideButton = function(){
    angular.element('.list-div').find('.client-jar').css('opacity','0');
  };

score 1 · Accepted Answer · 2016-04-04 19:38:30Z

1

I would use: https://docs.angularjs.org/api/ng/directive/ngMouseenter

<button ng-mouseenter="hoverState = true">mouse in mouse out</button>

Then use with: https://docs.angularjs.org/api/ng/directive/ngMouseleave

<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false">mouse in mouse out</button>

At this point you have a hover over and off flag. You can now pick this flag up with ng-class to set and unset a CSS class which contains your opacity stuff, and any future CSS animations etc etc: https://docs.angularjs.org/api/ng/directive/ngClass

<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">mouse in mouse out</button>

No jQuery required, AngularJS is just a totally different way of going about things.

<style>
.opacity-class .client-jar{
   opacity:0;
}
</style>
<ul>
        <li ng-repeat="one in ones | orderBy:'-date'">
            <div class="list-div">
                <div class="row jar-div first-jar-div" ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">
                    <div class="col-xs-7 description-div">
                        <p class="version">{{ one.version }}</p>
                        <p class="date">{{ one.date }}</p>
                    </div>
                    <div class="col-xs-5 buttons-div">
                        <div class="list-button client-jar">
                            <a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
                        </div>
                        <div class="list-button server-jar">
                            <a class="list-link">Server jar</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>

edited Apr 4, 2016 at 19:38

answered Apr 4, 2016 at 19:29

user1037355

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

3 Comments

NotAJohnDoe Over a year ago

But the thing is i want to have "hover" effect on only one element while mouse is on the bigger one. Basically, while mouse is on the .list-div div I want only one small element inside it highlighted.

user1037355 Over a year ago

@NotAJohnDoe I added your html syntax to my answer.. from what i can see that would work. Note the <style> tag I added. So on hover off the .jar-div doesn't have the .opacity-class (or whatever you best call it). But with it, the CSS sets .client-jar to opacity 0.

NotAJohnDoe Over a year ago

You're right, I got it now and it's working. Big thanks to you!

Zuriel · Accepted Answer · 2016-04-04 19:28:32Z

0

angular.module('App').directive('listFade', function() {
return function(scope, element) {

    element.bind('mouseover', function(children) {
        // YOUR ANIMATION CODE HERE
    });
    element.bind('mouseout', function(children) {
        // YOUR ANIMATION OUT CODE HERE
    });
  }
})

then just add the directive to your ng-repeat markup, list-fade=""

you don't need children but its a easy way to call the children of each element. This should help you out. Then get rid of that ng-mouseover showButton();

answered Apr 4, 2016 at 19:28

Zuriel

1,8581 gold badge19 silver badges32 bronze badges

Comments

klauskpm · Accepted Answer · 2016-04-04 19:47:19Z

0

Updating your code to use inline CSS, would be like this.

var element = document.querySelector('.list-div .client-jar');

$scope.showButton = function(){
  angular.element(element).css('opacity','1');
};

$scope.hideButton = function(){
  angular.element(element).css('opacity','0');
};

As in AngularJS .element documentation, it's said that you need to pass a element.

You can also use ng-class, creating a class for opacity:

<div class="client-jar" ng-class="{class: expression}"></div>

https://docs.angularjs.org/api/ng/directive/ngClass

Or use ng-show and ng-hide for display control:

<div class="client-jar" ng-show="expression"></div>

https://docs.angularjs.org/api/ng/directive/ngShow

You could even use ng-style for inline css:

<div class="client-jar" ng-style="{'opacity': '1'}"></div>

https://docs.angularjs.org/api/ng/directive/ngStyle

edited Apr 4, 2016 at 19:47

answered Apr 4, 2016 at 19:33

klauskpm

3,1652 gold badges20 silver badges29 bronze badges

3 Comments

NotAJohnDoe Over a year ago

Doesn't work, nothing happens :|. I know about other ways to change opacity but my problem is that I can't select that children.

klauskpm Over a year ago

Oh! I've read the AngularJS docs now. .find() is said to be limited only to tag names. I'll update my answer.

NotAJohnDoe Over a year ago

Hmm it's still not working for me, but the other answer sold my problem. Thanks anyway :)

Collectives™ on Stack Overflow

Selecting only one child element in AngularJS with jquery

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related