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

Question

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

在页脚中，有简单的导航显示不同的 View ，当您单击时， Angular 过滤器会通过原始列表查找匹配的元素。

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

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

如果这只是在 Jquery 或 javascript 中，我会知道如何解决这个问题，但是，我确信有一种我不知道的“Angular 特定”方法。

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();" >

Controller 更改:

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

然后在导航时调用它:

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

Forked Fiddle