I want to get the class name of a div which clicked. my there are few div tags like below.

<div id="car" class="ams-product car" data-ng-class="{ 'car-inactive ams-deactivated-product': carInactive() }" data-ng-click='getClass(); hide(); loadCarModule()'>
    <div class="ams-product-inner">
        <img class="product-img" data-ng-src="{{ carValidation()}}">
        <h3>Car</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
        <a href="#" class="add-this-product" data-ng-class="{ 'car-inactive': carInactive() }">+</a>
    </div>
</div>

I want the class name or the id of top outer div(div id="car"). Please note that there are three divs like this. So I want to know which div is clicked.

I want to get the class name of a div which clicked. my there are few div tags like below.

<div id="car" class="ams-product car" data-ng-class="{ 'car-inactive ams-deactivated-product': carInactive() }" data-ng-click='getClass(); hide(); loadCarModule()'>
    <div class="ams-product-inner">
        <img class="product-img" data-ng-src="{{ carValidation()}}">
        <h3>Car</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
        <a href="#" class="add-this-product" data-ng-class="{ 'car-inactive': carInactive() }">+</a>
    </div>
</div>

I want the class name or the id of top outer div(div id="car"). Please note that there are three divs like this. So I want to know which div is clicked.

• javascript
• angularjs

Share Improve this question Follow edited Jul 24, 2015 at 5:49 Tushar 87.3k2121 gold badges163163 silver badges181181 bronze badges asked Jul 24, 2015 at 5:49 Supun WimukthiSupun Wimukthi 8544 silver badges1212 bronze badges 3

• Start by showing how this car got created from scope model to generate this view. In angular you rarely need to use element ID's because the elements get created from your scope and therefore you pass those data model instances back into your functions in the html. You also don't worry about what class got clicked for the same reasons – charlietfl Commented Jul 24, 2015 at 5:54
• ng-class is related to your model so you can know which class is active. I'm not sure to fully understand... – MacKentoch Commented Jul 24, 2015 at 6:02
• You can get class of course, very easy. However, most likely you should better take another approach with ngShow/ngIf, if you want to toggle divs or something like this. – dfsq Commented Jul 24, 2015 at 6:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

If you want to check classes are set in the element which are apply using ng-class, you can simply check the variable/function which used to enable and disable ng-class like,

 $scope.getClass = function() {

      //if $scope.carInactive() is true then 
      //car-inactive & ams-deactivated-product classes apply to the element.

      console.log($scope.carInactive());
 };

Or you can use the old JavaScript way to get the class from the clicked element,

ng-click should be like pass the $event to clicked function,

...data-ng-click='getClass($event); hide(); loadCarModule()'>

 $scope.getClass = function(event) {
     console.log(event.srcElement.className);
 };

I think the best way you can do is first one, because in the second one if you click a child element of a outer div then ng-click will trigger, but when you trying to get the target of the event it will not always the outer div, because if you click on h3 then target element is h3

you should pass event variable in your html file

<div (click)="onClick($event)"></div>

then in your typescript file

you should use target and then id,className

onClick(e: any) {
    console.log(e.target.id, e.target.className);
}