单击一个子元素时如何隐藏所有其他元素

Question

我需要能够通过单击也由ng-repeat创建的其他元素来隐藏由ng-repeat动态生成的元素。 HTML示例：

<div ng-repeat="thing in things" ng-show="!displayId || displayId == 'thing.id'">
    <button ng-click="displayId = 'thing.id'">Click me!</button>
</div>

初始显示效果很好，因为在单击按钮之前未指定displayId ，但是我希望发生的事情是将displayId设置为我单击的任何按钮的thing.id ，一旦设置，所有其他div都会被隐藏。 但是，什么也没有发生。

有没有办法做到这一点？ 我试图不使用任何jquery并以纯角度的方式执行此操作。

Answer 1

因此，根据您提供的额外细节，您可以在ng-repeat上使用filter 。

<div ng-repeat="thing in things | filter:{id: selectedThingId}">
    <button ng-click="setSelectedThing(thing.id)">Click me!</button>
</div>

在您的控制器中：

$scope.selectedThingId;
$scope.setSelectedThingId = function setSelectedThingIdFn(thingId) {
  $scope.selectedThingId = thingId;
}

这是一个嵌入式Plunker示例：

 <iframe style="width: 100%; height: 600px" src="http://embed.plnkr.co/tpMSLcpEGkoWx4eGDcHo/preview" frameborder="0" allowfullscren="allowfullscren"></iframe>