单击另一个div时，在ng-repeat中单击ng-click时隐藏一个div

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

我们可以使用添加的属性来操纵它，例如对象可见

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/

Answer 2

尝试以下代码。

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