單擊一個子元素時如何隱藏所有其他元素

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>