ng-repeat：在点击时显示一个项目并隐藏其他项目答案

【问题标题】：ng-repeat: showing an item on click and hiding the othersng-repeat：在点击时显示一个项目并隐藏其他项目
【发布时间】：2014-10-16 15:34:30
【问题描述】：

我有一个 ng-repeat，它显示 divs 的列表，当我单击一个时，它会为单击的项目显示一个附加的 div。

这是有效的

<div ng-repeat="item in items">

    <div ng-click="showfull = !showfull">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

我的项目是从包含项目列表的 json 加载的，每个项目在此 json 中都有一个默认属性 showfull 设置为 false。这是有效的，但现在我想在单击项目时隐藏列表中的所有其他项目。我尝试过这样的事情：

这不起作用

<div ng-repeat="item in items">

    <div ng-click="expand(item)">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

在控制器中我添加了一个功能：

$scope.expand = function(e) {
    e.showfull = !e.showfull;
    //TODO: put here a foreach logic to hide all other items
}

但即使没有 foreach 逻辑，这也不起作用，单击时该项目不会显示附加 div。我有两个问题：

我想这是由于item 在expand 函数中被“复制传递”或某种范围隔离问题，但您能详细解释一下原因吗？ 已解决
当我单击一个项目并显示该项目的附加内容时，如何隐藏其他项目的所有附加 div？我需要做一个指令吗？ 未解决

谢谢

【问题讨论】：

标签： javascript angularjs ng-repeat angularjs-ng-show

【解决方案1】：

我认为你在正确的轨道上。您需要在项目上设置showfull，然后使用ng-show 或ng-if 将其隐藏，或者如Gavin 所述，使用一个类。

在ng-click 上，您可以调用expand 函数，在该函数中传递项目、切换它并将所有其他项目设置为隐藏。

模板：

<div ng-repeat="item in items>
    <div ng-click="expand(item)">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="item.showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

控制器：

$scope.expand = function (item) {
    angular.forEach($scope.items, function (currentItem) {
        currentItem.showfull = currentItem === item && !currentItem.showfull;
    });
};

【讨论】：

【解决方案2】：

您的 expand 方法正在修改项目，因此您的 ng-show 需要引用该项目：

<div ng-show="item.showfull">
    <p>{{item.info}}</p>
</div>

要隐藏所有项目，您需要执行以下操作

$scope.expand = function(item) {
   angular.forEach(items, function(i) {
       if (i === item) {
           i.showfull = !i.showfull;
       } else {
           i.showfull = false;
       }
    });
};

【讨论】：

谢谢，这似乎可行，如果我不从角度角度引用该项目会发生什么？ Angular 不会将项目链接到 ng-show 操作？
@deKajoo 如果您不引用该项目，您将反对$scope.showfull
第二个问题：要隐藏所有其他项目，我应该在控制器功能中使用angular.forEach 还是有更好的方法？（编辑：感谢第一个答案）

【解决方案3】：

您要显示的第二个 div 不应该引用该项目吗？

<div ng-repeat="item in items>

    <div ng-click="expand(item)">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <!-- Added item to ng-show -->
    <div ng-show="item.showfull"> 
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

【讨论】：