Angularjs querySelector find element based on property

Question

I tried to find if angularjs can do like below:

angular.element(document.querySelector('.content-here').find('div.offsetTop=8');

Can someone help me? You can see my plunker here.

what do you want to find in your plunker? there is no div with class offsetTop in your plunker. there's a text node with content that contains {"localName":"div","offsetTop":8}. did you intend to create DOM nodes based on the enries of $scope.show array? — Max Koretskyi
– Max Koretskyi, Commented Nov 26, 2016 at 11:13
I want to allocate class animated fadeInLeft in each element with different respective delays. $scope.show just show the property I got from my variable elementObj. Are you clear? Sorry for bad english. — Nere
– Nere, Commented Nov 26, 2016 at 11:24
All elements contained in .content-here class. In my case all the divs including image. — Nere
– Nere, Commented Nov 26, 2016 at 11:37
angular.element(document.querySelector('.content-here'))[0]will work for you. — candidJ
– candidJ, Commented Nov 26, 2016 at 11:42

Nere · Accepted Answer · 2016-11-26 16:03:31Z

1

Edited:
You could make a directive if you do not wish to specify one by one. Also, remove the unecessary code in the controller. Plunker here

  .directive('animateFromLeft', function($compile) {
      return {
        restrict: 'AE',
        link: function(scope, elem, attr) {
          var children = elem.children();
          children.addClass('animated fadeInLeft');

          var animationDelay = 0;
          for(var i = 0; i < children.length; i++) {
            children[i].style.animationDelay = animationDelay.toString() + 's';
            animationDelay += 1;
          }

          $compile(elem)(scope);
        }
      };
    });

========================================================================

I think you are doing it in hard way. I assume that you will not be using ng-repeat and based on your scenario you can specific the animation delay one by one.

Plunker here

<div class="content-here">
      <div class="animated fadeInLeft" style="animation-delay: 0s">1</div>
      <div class="animated fadeInLeft" style="animation-delay: 1s">2</div>
      <img class="animated fadeInLeft" style="animation-delay: 2s" width="100px" src="https://staticdelivery.nexusmods.com/mods/110/images/74627-0-1459502036.jpg" />
      <div class="animated fadeInLeft" style="animation-delay: 3s">3</div>
      <div class="animated fadeInLeft" style="animation-delay: 4s">4</div>
    </div>

edited Nov 26, 2016 at 16:03

Nere

4,0956 gold badges36 silver badges75 bronze badges

answered Nov 26, 2016 at 12:37

whyyie

8024 silver badges10 bronze badges

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

2 Comments

Nere Over a year ago

Thanks for the answer. I need to use that way since I did not want to add manually the class. Let the querySelector find and addClass from there.

Nere Over a year ago

Brilliant! Thank you very much for your nice codes!.

Collectives™ on Stack Overflow

Angularjs querySelector find element based on property

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related