How to make an element appear only on the block on which there was a click?

Question

JavaScript

How to make an element appear only on the block on which there was a click? In my example, when you click on show hide list, the list appears on all elements. How can I change the code so that the list appears only in one block?

https://plnkr.co/edit/8rr6MunVARNXJo4tEJno?p=preview

Answer 1

Obviously, each item should have its own property responsible for displaying the item:

$scope.items = [ 1, 2, 3, 4, 5, 6, 7, 8 ].map(n => ({
  value: n,
  show: false,
}));

<li ng-repeat="item in items">
  <a ng-click="item.show = !item.show">toggle</a>
  <div ng-show="item.show">
    hello, world!!
  </div>
  {{ item.value }}
</li>