单击“共享”时关闭其他项目上的股票选项

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.

}

您还可以查看库角用户界面手风琴控件。