Question

我有一个ng-repeat显示divs的列表，当我点击一个时，它会显示所点击项目的aditionnal 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正在通过副本＆＃34;在expand函数或某种范围隔离问题，但你能解释一下为什么详细？的解决
当我点击某个项目并显示该项目的附加内容时，如何隐藏其他所有其他项目？我需要做一个指令吗？ 未解决

由于

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

Answer 2

您的展开方法正在修改该项目，因此您的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;
       }
    });
};

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

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

3 个答案: