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

Question

<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/

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

请帮忙解决。

Answer 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;
          }
       }
    }
}

Answer 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/