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;].