如何在所有元素上触发ng-hide

Question

我有一个列表，当您点击li时，它会显示有关该人的隐藏信息列表。

在页脚中，显示不同视图的简单导航和单击时，角度筛选匹配元素的原始列表。

我坚持的就是这个;如果你单击一个li元素并显示该人的信息，然后单击其中一个导航按钮，它仍会显示该人，但显示隐藏元素...未关闭。

理想情况下，id更喜欢当用户点击任何页脚导航按钮时，列表只显示名称，而不是隐藏的信息..无论是否单击它。

如果这只是在Jquery或javascript中，我会知道如何处理这个，但我确定这是一个我只是不知道的“角度特定”方法。

继承人HTML：

<div ng-controller="MyCtrl">
<ul id="housewrapper" ng-cloak>
<li ng-repeat="item in house track by item.member" class="listings" ng-click="showComments = !showComments;"  ng-show="([item] | filter:filters).length > 0" >

    <span ng-if="item.whereHesheStands == 'oppose'"><img class="dot againstdot" src="img/against.png">{{item.member}}
    </span>

     <span ng-if="item.whereHesheStands == 'leanoppose'">
         <img class="dot againstdot" src="img/against.png">{{item.member}}
    </span> 

     <span ng-if="item.whereHesheStands == 'support'" ng-click="clickMeImg($event);">
    <img class="dot supportdot" src="img/support.png">{{item.member}}
    </span>  

     <span ng-if="item.whereHesheStands == 'leansupport' ">
    <img class="dot supportdot" src="img/support.png">{{item.member}}
    </span> 
     <span ng-if="item.whereHesheStands == 'unknown' ">
    <img class="dot undecideddot" src="img/undecided.png">{{item.member}}
    </span>     

     <span ng-if="item.whereHesheStands == 'undecided' ">
    <img class="dot undecideddot" src="img/undecided.png">{{item.member}}
    </span>         

    <div class="memberdetail"  ng-show="showComments"  ng-click="$event.stopPropagation();" >
        <ul class="memberbreakdown">
            <li class="partyline" >
            {{item.party}} - {{item.state}}</li>
            <li class="comments">
            <span style="color:#a4a4a4;" ng-if="!(item.comments)">Comment not available</span>

            <span>{{item.comments}}</span>
            </li>                                       
        </ul>

    </div>



 </li>

</ul>


<div id="appfooterWrapper">
    <ul id="appfooter">

     <li ng-click="myFunctionRepublican();" ng-class="class">R</li>
     <li ng-click="myFunctionDemocrat();" ng-class="class2">D</li>
     <li ng-click="myFunctionSupport();" ng-class="class3">S</li>
     <li ng-click="myFunctionOppose();" ng-class="class4">A</li>
     <li ng-click="myFunctionUnknown();" ng-class="class5">U</li>
    </ul>
</div>             

以及“R”导航按钮的javascript

$scope.myFunctionRepublican = function() {

  $('.memberdetail').removeClass('ng-show');
  $('.memberdetail').bind('click');

   $scope.filters = function(house) {
     return house.party == 'R'  ;
 };
    if ($scope.class === ""){
        $scope.class = "rep";
        $scope.class2 = "";
        $scope.class3 = "";
        $scope.class4 = "";
        $scope.class5 = "";
        }
     else{
        $scope.class = "";
        }
$('html, body').animate({scrollTop:0}, 'fast');

 var loading;

 loading = true;
 if (loading == true) {
    setTimeout(function() {
         spinner.stop();
          $('.listings').not('.ng-hide').addClass('republican');
          console.log($('.republican').length);
         $('#housewrapper').stop().fadeIn(350).addClass(
             'marginAdd');
         $('#subhead').removeClass('slidedown');

         $('#subhead').html('Republicans').css('color', '#d41600');

         setTimeout(function() {
             $('#subhead').addClass('slidedown');
         }, 300);
     }, 500);
    }
} 

这是Fiddle

Answer 1

一对夫妇改变，将财产附加到每个成员。

查看更改：

ng-click="item.showComments = !item.showComments;"

<div class="memberdetail"  ng-show="item.showComments"  ng-click="$event.stopPropagation();" >

控制器更改：

function resetShow() {
  for(var i = 0, l = $scope.house.length; i < l; i++) {
    $scope.house[i].showComments = false;   
  }
}

然后在导航时调用它：

$scope.myFunctionUnknown = function() {
  resetShow();
  ....

Forked Fiddle