Max Lynn Max Lynn - 3 months ago 15
AngularJS Question

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

<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.

Answer

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!