How to make a button appear/disappear only from one of the loops created by ng-repeat? (Programming in Angularjs)

Question

My angular code has an ng-repeat as follows:

Angularjs:

angular.module('meumodulo', [])

.controller('mercadoria', function($rootScope, $http) {

    var ctrl = this;
    $rootScope.listademercadoria = [];
    
    $rootScope.mercadoria0 = {
        id: 'id1',
        setor: 'setor1',
        foto: 'foto1',
        descr: 'descr1',
        de: de1,
        por: por1,
        mercadoria: '0',
        quantidade: 1,
        total: ''
    }

    $rootScope.listademercadoria.push($rootScope.mercadoria0);

    $rootScope.mercadoria1 = {
        id: 'id2',
        setor: 'setor2',
        foto: 'foto2',
        descr: 'descr2',
        de: 'de2',
        por: 'por2',
        mercadoria: '1',
        quantidade: 1,
        total: ''
    }
    $rootScope.listademercadoria.push($rootScope.mercadoria1);



    $rootScope.showPanel = true;
    $rootScope.listademercadoria.push($rootScope.mercadoria1);

    $rootScope.remover = function(b) {

        {
            $rootScope.showPanel = !$rootScope.showPanel;
        }
    }


});

in my HTML Code, OUTSIDE ng-repeat loop, there is the following clickable item:

<span style="margin-right: 8px;"> ou </span><a href="#" ng-click = " remover();">remover</a>

By clicking on it, the function $rootScope.remover = function () is triggered, and so it changes the value boolean of showPanel, thus making the following add button (contained in the ng-repeat loop) visible:

<button class="add"  ng-show = "showPanel" id = "{{mercadoria.id}}">adicionar</button>

Explained how the system is behaving, comes the question:

I have been looking for a solution to the case for a long time, but in all possible solutions, by clicking on the div "remove", the "add" buttons of the two Ivs generated by ng-repeat. How do I make visible the "add" button of ONLY ONE of the Divs generated by ng-repeat?

EDITION:

I tried to put an extra property on the Angularjs:

    $rootScope.mercadoria0 = {
 id: 'id1',
 setor: 'setor1',
 foto: 'foto1',
 descr: 'descr1',
 de: de1,
 por: por1,
 mercadoria: '0',
 quantidade: 1,
 total: '',
 show: 'show0'

 }

 $rootScope.listademercadoria.push($rootScope.mercadoria0);

 $rootScope.mercadoria1 = {
 id: 'id2',
 setor: 'setor2',
 foto: 'foto2',
 descr: 'descr2',
 de: 'de2',
 por: 'por2',
 mercadoria: '1',
 quantidade: 1,
 total: ''
 show: 'show1'

 }
 $rootScope.listademercadoria.push($rootScope.mercadoria1);

Thus my button would receive the values of the show as dependency for ng-Hide, and when clicked it would disappear, because the value of {{merchandise.show}} would become true:

<button class="add"  ng-hide = "{{mercadoria.show}}" id = "{{mercadoria.id}}" ng-click = "incluirNoCarrinho(mercadoria); {{mercadoria.show}} = true;">

And after inserting the same market1 and mercadoria0 in a new $rootScope.cart, made that ng-repeat="merchandise in cart" call the button remove every time the button add is clicked. So, I pass the attribute {{merchandise.show}}=false; to the ng-click of remove:

<span style="margin-right: 8px;"> ou </span><a href="#" ng-click = "{{mercadoria.show}}=false;">remover</a>

But the browser is error and the add button simply does not do actions while being clicked. Follow error:

Syntax Error: Token '{' invalid key at column 33 of the expression [incluirNoCarrinho(mercadoria); {{mercadoria.show}} = true;] starting at [{mercadoria.show}} = true;].

Answer 1

You must work with two lists, one for the cart and one for the products. Use a service to pass the information to the cart list, thus allowing only one instance of the cart to exist for your application:

angular
  .module('appCarrinho', []);

angular
  .module('appCarrinho')
  .factory('carrinhoService', carrinhoService);

carrinhoService.$inject = [];

function carrinhoService() {
  var service = {};
  var lista = [];

  service.listar = _listar;
  service.adicionar = _adicionar;
  service.remover = _remover;

  return service;

  function _listar() {
    return lista;
  }

  function _adicionar(mercadoria) {
    lista.push(mercadoria);
  }

  function _remover(id) {
    var apagar;

    for (var indice = 0; indice < lista.length; indice++) {
      if (lista[indice].id === id) {
        apagar = indice;
      }
    }

    lista.splice(apagar, 1);
  }
}

/** Controller para Produtos **/
angular
  .module('appCarrinho')
  .controller('ProdutoController', ProdutoController);

ProdutoController.$inject = ['$filter', 'carrinhoService'];

function ProdutoController($filter, carrinhoService) {
  var produto = this;
  var carrinho;

  produto.adicionar = _adicionar;
  produto.remover = _remover;
  produto.verificarAdicionar = _verificarAdicionar;
  produto.verificarRemover = _verificarRemover;

  _iniciar();

  function _iniciar() {
    produto.lista = [];
    
    produto.lista.push({id: 1, descricao: 'Batata'});
    produto.lista.push({id: 2, descricao: 'Cebola'});
    produto.lista.push({id: 3, descricao: 'Tomate'});
    carrinho = carrinhoService.listar();
  }

  function _adicionar(mercadoria) {
    carrinhoService.adicionar(mercadoria);
  }

  function _remover(mercadoria) {
    carrinhoService.remover(mercadoria.id);
  }

  function _verificarAdicionar(mercadoria) {
    return $filter('filter')(carrinho, mercadoria).length === 0;
  }

  function _verificarRemover(mercadoria) {
    return $filter('filter')(carrinho, mercadoria).length !== 0;
  }
}

/** Controller para o Carrinho **/
angular
  .module('appCarrinho')
  .controller('CarrinhoController', CarrinhoController);

CarrinhoController.$inject = ['carrinhoService'];

function CarrinhoController(carrinhoService) {
  var carrinho = this;

  _iniciar();

  function _iniciar() {
    carrinho.lista = carrinhoService.listar();
  }
}

.listagem {
    width: 50%;
    height: 200px;
    float: left;
}

.carrinho {
    margin-left: 15%;
    height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appCarrinho">
  <div id="divProdutos" class="listagem" ng-controller="ProdutoController as produto">
    <div ng-repeat="mercadoria in produto.lista">
      {{mercadoria.descricao}}
      <button ng-if="produto.verificarAdicionar(mercadoria)" ng-click="produto.adicionar(mercadoria)">adicionar</button>
      <button ng-if="produto.verificarRemover(mercadoria)" ng-click="produto.remover(mercadoria)">Remover</button>
    </div>
  </div>

    <div id="divCarrinho" class="carrinho" ng-controller="CarrinhoController as carrinho">
    <div ng-repeat="mercadoria in carrinho.lista">
      {{mercadoria.descricao}}
    </div>
  </div>
</div>

Answer 2

Solved!

I set a "boto" variable inside each ng-repeat loop, so that boto was always $mercadoria-1. When clicking remove, then the boto received $boto+1, thus leaving the two variables equal. And I put $boto = $merchandise as a condition for ng-show, and voillá! Problem solved.