5

我有一个 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。我有两个问题：

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

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

谢谢

4

3 回答 3

4

我认为你在正确的轨道上。您需要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;
    });
};
于 2014-10-16T16:00:33.037 回答
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;
       }
    });
};
于 2014-10-16T15:54:12.050 回答
0

您要显示的第二个 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>
于 2014-10-16T16:00:40.697 回答