how do you get a class off an element in Angular?

Question

<div class="js-show-more">
    <p class="app-light-text">
         The factors of a number are all the numbers that divide into it. The highest common factor, HCF, of two
         or more numbers is the highest factor that divides into all the numbers. For example, what is the highest
         common factor of 24 and 36? The answer is 12. 12 is a factor of both 24 and 36 and it is the highest
         factor that they have in factors of a number are all the numbers that divide into it. The highest common factor, HCF, of two
         or more numbers is the highest factor that divides into all the numbers. For example, what is the highest
         common factor of 24 and 36? The answer is 12. 12 is a factor of both 24 and 36 and it is the highest
         factor that they have in common
    </p>
    <a ng-click="toggle($event)" class="js-show-more-toggle"></a>
</div>

// JS
scope.toggle = function (e) {
    console.log(scope);
    // $(e).parents('.js-show-more').toggleClass('open');
};

I'm trying to get the current class so I can then get the class above to add the class open to it.

What is the best way to do this?

So .js-show-more has the class .open when class .js-show-more-toggle is clicked. I need this to work for duplicates of this code.

Cory Silva · Accepted Answer · 2016-08-22T15:02:23.817

5

You should know the class based on a variable.

<div class="js-show-more" ng-class="{open:isOpen}>
    <p class="app-light-text">...</p>
    <a ng-click="isOpen = !isOpen" class="js-show-more-toggle"></a>
</div>

If using ng-repeat it gets even easier since ng-repeat automatically creates isolate scopes. See example below:

<div class="js-show-more" ng-repeat="item in items" ng-class="{open:item.isOpen}">
    <p class="app-light-text">...</p>
    <a ng-click="item.isOpen = !item.isOpen" class="js-show-more-toggle"></a>
</div>

Simply extend each isolate scope!

edited Aug 22 '16 at 15:02

answered Aug 22 '16 at 14:50

Cory Silva

2,761
17
23

For an angular approach, I think this is the right method – Jared Hooper Aug 22 '16 at 14:51
oh nice one... that is a good approach i havne't thought of. Will give it a go. – Max Lynn Aug 22 '16 at 14:52
Ah the problem with this is that I need to use it on multiple elements so it also opens all my other rows. Is there a way to make this specific to this element? – Max Lynn Aug 22 '16 at 14:54
1

Are the multiple elements generated in a loop? Give a more comprehensive example and I can walk you through a more sustainable approach. – Cory Silva Aug 22 '16 at 14:55
Thanks, It will be in a ng-repeat but for now I have it as static html. The HTML that I have posted is duplicated 6 times with the same class names. I basically need the open class to be added to just one of these rows instead of all 6 rows. I hope this has made it more clear – Max Lynn Aug 22 '16 at 14:58
1

Alright... cheers. I mean this will do for now.. As I'm going to use ng-repeat. Thanks for yourt helpw – Max Lynn Aug 22 '16 at 15:04

score 1 · Answer 2 · edited May 23 '17 at 12:08

1

You can also use jQuery, since that's what it looks like you're using:

var className = $('js-show-more').attr('class');

edited May 23 '17 at 12:08

Community

1
1

answered Aug 22 '16 at 14:46

Jared Hooper

881
1
10
31

how do you get a class off an element in Angular?

2 Answers2