Show/Hide button onclick in ng-repeat inside repeat

Question

How can I access and show/hide the exact button in second repeat?

<div class="row" ng-repeat="person in people">
  <div class="row" ng-repeat="ticket in tickets">
   <button type="button" ng-if="!ticket.added" ng-click="add(ticket)">+</button>
   <button type="button" ng-if="ticket.added" ng-click="remove(ticket)">-</button>
  </div>
</div>

For example I have 3 persons and 4 different tickets. When someone click on button I want to add clicked ticket for that person.

Now when I click on add button, it's adding clicked ticket for all persons :(

Thanks in advance!

Answer 1

I'm not sure (your question is not too clear) but, maybe you can pass the person to your functions too?

Example:

$scope.people = [{
        name: 'Jhon Snow',
      tickets: [{
        name: 'ticket1',
        added: false
      }, {
        name: 'ticket2',
        added: false
      }]
    }, {
        name: 'Peter Parker',
      tickets: [{
        name: 'ticket3',
        added: false
      }, {
        name: 'ticket4',
        added: false
      }]
    }];    

    $scope.add = function (ticket) {
        ticket.added = true;      
    }

    $scope.remove = function (ticket) {
        ticket.added = false;
    }

And the html:

<div class="row" ng-repeat="person in people">
  {{ person.name}}
  <div class="row" ng-repeat="ticket in person.tickets">
    - {{ ticket.name }}
     <button type="button" ng-if="!ticket.added" ng-click="add(ticket)">+</button>
     <button type="button" ng-if="ticket.added" ng-click="remove(ticket)">-</button>
  </div>
</div>

You can check a working example here