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

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

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

<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示例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;