2016-08-22 64 views
2
<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'); 
}; 

我想獲取當前的類,以便我可以再獲取上面的類來添加打開它的類。你如何從Angular的一個元素中獲得一個類?

這樣做的最好方法是什麼?

因此.js-show-more具有類別.open當類.js-show-more-toggle被點擊。我需要這個工作來重複這段代碼。

回答

5

你應該知道基於變量的類。

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


如果使用 ng-repeat它會變得容易,因爲 ng-repeat自動創建隔離範圍。看下面的例子:

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

只是擴展每個隔離範圍!

+0

對於角度的方法,我認爲這是正確的方法 –

+0

噢好的一個...這是一個很好的方法,我沒有想到。會放棄它。 –

+0

啊,這個問題是我需要在多個元素上使用它,所以它也打開我所有的其他行。有沒有辦法讓這個元素具體化? –

1

可以使用jQuery,因爲這就是它看起來像你使用:

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