如何从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.

Answer 1

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!

Answer 2

您还可以使用jQuery ，因为这就是您正在使用的样子：

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