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

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 设置为 事物。我点击的任何按钮的 id ，一旦设置，所有其他 div 都会被隐藏。然而，什么也没有发生。

有办法实现这一点吗？我试图不使用任何 jquery 并以纯粹的 Angular 方式执行此操作。

Answer 1

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

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

在你的 Controller 中:

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