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

我有一个ng-repeat显示divs的列表，当我点击一个时，它显示一个点击项目的自动div。ng-repeat：显示一个点击并隐藏其他项目

这是工作

<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默认attribut showfull设置为false。这是行得通的，但现在我想在单击项目时隐藏列表中的所有其他项目。我tryied是这样的：

这不是工作

<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当我点击一个项目，显示该项目的其它附加内容？我需要做一个指令吗？ 没有解决

感谢

来源

2014-10-16 deKajoo

我认为你在正确的轨道上。您需要在该项目上设置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; 
    }); 
};

来源

2014-10-16 16:00:33 PzYon

你扩大法修改的项目，所以你的NG-显示需要参考的项目：

<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-16 15:54:12 Vadim

感谢，似乎工作，如果我没有在角度的角度参考项目会发生什么？ Angular不会将项目链接到ng-show动作？ – deKajoo 2014-10-16 15:58:24

@deKajoo如果你没有引用这个项目，你将会违背'$ scope.showfull' – Vadim 2014-10-16 15:59:33

第二个问题：为了隐藏所有其他项目，我应该在控制器函数中使用'angular.forEach'还是有更好的方法？（编辑：感谢您的第一个答案） – deKajoo 2014-10-16 15:59:54

应该不是你想显示会引用该项目的第二个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-16 16:00:40 Oliver

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

回答

相关问题