Закрытие опций на другие статьи при нажатии на долю

Question

Я ищу, чтобы добавить социальный обмен в список статей с помощью AngularJS.
Я реализовал переключение для нажатия кнопки совместного доступа, но если я нажму кнопку «Поделиться» в другой статье, я хочу, чтобы опции на этом закрывались.

Прямо сейчас, когда каждый щелчок .share-article остается открытым (фактически разрешая беспорядок на странице), каждый отдельный параметр. Я хочу, чтобы активный был открыт.

<span class="article-title"> 
    <a href="{{article.url}}">{{article.title}}</a> 
</span> 
<div class="click-items"> 
    <a ng-click="articles.removeArticle($index)" class="delete-article clickable" title="Remove article"> 
    <span>&#10006;</span> 
    </a> 
    <a ng-click="socialShare = !socialShare" class="share-article clickable"> 
    <span class="plus-sign" title="Share">&#10006;</span> 
    <div social-share ng-show="socialShare" class="social-share arrow-down"> 
     <div ng-click="socialShare = !socialShare" class="addthis_toolbox addthis_default_style addthis_16x16_style" 
     addthis:title="{{article.title}}" addthis:description="{{article.extract}}" addthis:url="{{article.url}}"> 
     <a class="addthis_button_facebook"></a> 
     <a class="addthis_button_twitter"></a> 
     <a class="addthis_button_google_plusone_share"></a> 
     <a class="addthis_button_reddit"></a> 
     <a class="addthis_button_hackernews"></a> 
     <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> 
     <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-529b989f77fb3475"></script> 
     </div> 
    </div> 
    </a> 
</div> 

Как это можно сделать?

Answer 1

Чтобы это произошло, вам необходимо отслеживать состояние каждой из кнопок совместного доступа. Вы используете, я считаю, socialShare переменной для этого. И, скорее всего, вы используете ng-repeat, поэтому эта переменная создается в каждой области повтора, эффективно создавая переменную n socialShare, недоступную за пределами области повторного доступа.

Один из способов исправить это было бы сделать переменную socialShare доступны на объекте статьи эта линия становится

<div social-share ng-show="article.socialShare" class="social-share arrow-down"> 

и это становится

<a ng-click="toggle(article)" class="share-article clickable">

В контроллере создать такие методы, как

$scope.toggle=function(article) { 
    angular.forEach(articles,function(article) { 
     article.socialShare=false; //This would close all open items 
    }); 
    article.socialShare=true;   // This will show the item selected. 

} 

Вы также можете посмотреть библиотеку angular-ui аккордеонный контроль.