Get a specific element in AngularJs

Question

I have the following code:

angular.element('div');

which returns an object of all the div elements on the page. How can I get the index of a specific div.one in this object?

I've tried indexOf(), but it doesn't work on objects.

https://jsfiddle.net/quodm9mx/

answered here http://stackoverflow.com/questions/23609171/how-to-get-element-by-classname-or-id — , Sep 23 '16 at 13:33

Mohit Tanwani · Accepted Answer · 2016-09-23T13:50:36.403

You can try

angular.element(document.querySelector('.one'));

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
     console.log($(angular.element(document.querySelector('.one'))).index());                      
      
       console.log(angular.element(document.querySelector('.one')));
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="GreetingController">
    <div></div>
    <div></div>
    <div></div>
    <div class="one"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Thanks, thats exactly what I needed :) – gespinha Sep 23 '16 at 14:08 — gespinha, Sep 23 '16 at 14:08

score -1 · Answer 2 · answered Sep 23 '16 at 13:34

As what I am reading in Chrome, you cant use selectors with jqLite:

Uncaught Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element

But if you read that link, it will tell you that if jQuery is available (you have included jQuery in your page), angular.element becomes an alias of jQuery selector ($). So include jQuery.

Get a specific element in AngularJs

2 Answers2