Question

我有代码here，我希望一次只展开一个项目。我无法弄清楚这个条件。如果有人能够指出我可能缺少的东西，请欣赏它。

function sample ($scope) {

    $scope.procedures = [
        {
            definition: 'Procedure 1',
            discharged: 23
        },
        {
            definition: 'Procedure 2',
            discharged: 2
        },
        {
            definition: 'Procedure 3',
            discharged: 356
        }
    ];
}


<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-class="{ 'hidden': ! showDetails }">
            <p>Number of patient discharges: {{procedure.discharged}}</p>
         </div>
    </li>
</ul>

Answer 1

您需要存储每个过程的状态。或者您可以将过程定义放在变量中，例如：

<ul class="procedures" ng-app ng-controller="sample">
  <li ng-repeat="procedure in procedures">
    <h4><a href="#" ng-click="showDetails = showDetails ? undefined : procedure.definition">{{procedure.definition}}</a></h4>
    <div class="procedure-details" ng-class="{ 'hidden': ! (showDetails && showDetails == procedure.definition) }">
      <p>Number of patient discharges: {{procedure.discharged}}</p>
    </div>
  </li>
</ul>

Answer 2

<ul class="procedures" ng-app ng-controller="sample">
    <li ng-repeat="procedure in procedures">
        <h4><a href="#" ng-click="clickLink($index)">{{procedure.definition}}</a></h4>
         <div class="procedure-details" ng-class="{ 'hidden': ! procedure.showDetail }">
            <p>Number of patient discharges: {{procedure.discharged}}</p>
         </div>
    </li>
</ul>

function sample ($scope) {

        $scope.clickLink = function(idx){
        for(var i=0;i<$scope.procedures.length;i++){
        if(i != idx)
            $scope.procedures[i].showDetail = false;
        else
            $scope.procedures[i].showDetail = true;
      }
    }
    $scope.procedures = [
        {
            definition: 'Procedure 1',
            discharged: 23,
            showDetail:false
        },
        {
            definition: 'Procedure 2',
            discharged: 2,
            showDetail:false
        },
        {
            definition: 'Procedure 3',
            discharged: 356,
            showDetail:false
        }
    ];
}

Answer 3

您可以在控制器中定义一个activeItem变量来保存要显示的项目。然后，您应该将单击的元素的索引分配给该变量：

ng-click="showDetails = ! showDetails; $parent.activeItem = $index"

然后，您应该检查两个值以显示项目：

ng-class="{ 'hidden': ! ( showDetails && $parent.activeItem == $index )}"

查看下面的jsfiddle：

http://jsfiddle.net/asmKj/1190/

Answer 4

您需要存储以前选择的索引才能使事情正常进行。

<强> HTML：

RefPointer

<强>码

Ptr

提取 here 的样本进行抓取。

注意：引用点数（1）＆amp; （2）是关键。

在ng重复中一次显示一个内容

4 个答案: