2

Meu código angular tem um ng-repeat da seguinte forma:

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;
        }
    }


});

em meu Código HTML, FORA do laço ng-repeat, há o seguinte item clicável:

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

Ao clicar nele, a função $rootScope.remover = function () é acionada, e assim ele muda o valor booleano de showPanel, fazendo assim com que o seguinte botão adicionar (contido no laço ng-repeat) torne-se visível:

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

Explicado como está se comportando o sistema, vem a pergunta:

Tenho procurado há muito tempo uma solução para o caso, mas em todos as possíveis soluções, ao clicar na div "remover", somem os botões "adicionar" das duas divs geradas pelo ng-repeat. Como faço para tornar visível o botão "adicionar" de SOMENTE UMA das divs geradas pelo ng-repeat?

EDIÇÃO:

tentei colocar uma propriedade a mais no 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);

Assim meu botão receberia os valores do show como dependência para o ng-hide, e ao ser clicado ele desapareceria, pois o valor de {{mercadoria.show}} tornaria-se verdadeiro:

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

E após inserir as mesmas mercadoria1 e mercadoria0 num novo $rootScope.carrinho, fiz com que esse ng-repeat="mercadoria in carrinho" chamasse o botão remove a cada vez que o botão adicionar é clicado. Assim, eu passo o atributo {{mercadoria.show}}=false; para o ng-click do remove:

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

Porém o browser acusa erro e o botão adicionar simplesmente não faz ações ao ser clicado. Segue erro:

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

2 Respostas 2

1
+25

Você deve trabalhar com duas listas, uma para o carrinho e uma para os produtos. Utilize um service para passar as informações para a lista do carrinho, permitindo assim que apenas uma instância do carrinho exista para a sua aplicação:

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>

0

Resolvido!

Setei uma variável "boto" dentro de cada laço ng-repeat, de forma que boto fosse sempre $mercadoria-1. Ao clicar em remover, então o boto recebia $boto+1, assim deixando as duas variáveis iguais. E coloquei $boto = $mercadoria como condição para ng-show, e voillá! Problema resolvido.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .