ng-repeat:显示单击项目并隐藏其他项目

Question

我有一个ng-repeat显示一个列表,divs当我点击一个时,它会显示div所点击项目的aditionnal .

这很有效

<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设置了默认的attribut 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.我有两个问题:

1. 我想这是由于item在expand函数中"通过副本传递" 或某种范围隔离问题,但你能详细解释一下为什么吗？ 解决了

2. 当我点击某个项目并显示该项目的附加内容时,如何隐藏其他所有其他项目？我需要做一个指令吗？ 没有解决

谢谢

Answer 1

我认为你走在正确的道路上。showfull您需要在项目上设置，然后使用ng-show或ng-if来隐藏它，或者正如加文提到的，使用一个类。

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