当点击另一个 div 时，在 ng-repeat 中隐藏一个 div on ng-click

Posted 2023-05-09

【中文标题】当点击另一个 div 时，在 ng-repeat 中隐藏一个 div on ng-click

【英文标题】：Hide one div on ng-click within ng-repeat when another div is clicked

【发布时间】：2017-10-24 14:56:39

【问题描述】：

<ul class="procedures" ng-app ng-controller="sample">
<li ng-repeat="procedure in procedures">
    <h4><a href="#" ng-click="showDetails = ! showDetails">procedure.definition</a></h4>
     <div class="procedure-details" ng-show="showDetails">
        <p>Number of patient discharges: procedure.discharged</p>
     </div>
</li>

看看这个小提琴：http://jsfiddle.net/asmKj/

有时我只希望显示单击的当前过程。如果我单击另一个程序，则应隐藏前一个程序。

请帮忙解决。

【问题讨论】：

怎么了？小提琴完全按照你说的做

程序 1：单击（显示描述）程序 2：单击（显示描述，但仍显示程序 1 描述）我想要这样，程序 1：单击（应显示描述）程序2：单击（应显示过程 2 的描述并应隐藏过程 1 的描述）

刚刚更新了你的 jsfiddle jsfiddle.net/asmKj/1282

【参考方案1】：

试试下面的代码。

html

<ul class="procedures" ng-app ng-controller="sample">
    <li ng-repeat="procedure in procedures">
        <h4><a href="#" ng-click="displayDescription($index)">procedure.definition</a></h4>
         <div class="procedure-details" ng-show="procedure.isShow">
            <p>Number of patient discharges: procedure.discharged</p>
         </div>
    </li>
</ul>

js

function sample ($scope) 
    
    $scope.procedures = [
        
            definition: 'Procedure 1',
            discharged: 23,
            isShow: false
        ,
        
            definition: 'Procedure 2',
            discharged: 2,
            isShow: false
        ,
        
            definition: 'Procedure 3',
            discharged: 356,
            isShow: false
        
    ];

    $scope.displayDescription=function(index)
    
       $scope.procedures[index].isShow = true;

       for(var i=0;i<$scope.procedures.length;i++)
       
          if(i!=index)
          
            $scope.procedures[i].isShow = false;
          
       
    

【参考方案2】：

我们可以通过添加属性来操作它，例如对对象可见

function sample ($scope) 

    $scope.procedures = [
        
                id:1,
            definition: 'Procedure 1',
            discharged: 23,
            visible:false
        ,
        
                id:2,
            definition: 'Procedure 2',
            discharged: 2,
            visible:false
        ,
        
                id:3,
            definition: 'Procedure 3',
            discharged: 356,
            visible:false
        
    ];

  $scope.manipulateVisibility = function(obj)
            for(var i=0; i<$scope.procedures.length; i++)
                if(obj==$scope.procedures[i])
                    $scope.procedures[i].visible=true;
            else
                    $scope.procedures[i].visible=false;
            
        
    

工作样本可在以下位置找到 http://jsfiddle.net/asmKj/1281/

【讨论】：

@LavanyaD 在上面的例子中添加了字段id 不是必需的，但它确保每个对象在某种程度上都是唯一的，而不是仅仅依赖于名称！