How do I make / disappear a button only from one of the ng-repeat loops? (Programming in AngularJS)

Question

How do I make / disappear a button only from one of the ng-repeat loops? (Programming in AngularJS)

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

My angle code has 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 of the 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 $rootScope.remover = function () function is fired, so it changes the boolean showPanel value, causing the next add button (contained in loop ng-repeat) becomes visible:

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

Explained how the system behaves, comes the question:

I've been looking for a solution for a long time, but in all possible solutions, by clicking the "remove" div, add the "add" buttons of the two divs 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 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);

So my button would get the values of the show as a dependency for ng-hide, and when it was clicked it would disappear, since the value of {{commodity.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 commodity1 and commodity0 into a new $ rootScope.carriage , I caused that ng-repeat="merchandise in cart" button remove button each time the add button is clicked. So, I pass the {{commodity.show}} = false; attribute to the ng-click remove attribute:

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

However, the browser reports an error and the add button simply does not do any actions when it is clicked. Here is an error:

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

javascript html angularjs div ng-repeat

asked by anonymous 23.09.2017 / 04:54

2 answers

0

Solved!

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

25.09.2017 / 07:06

Doubt about the operation of the AudioRecord class Open new window from button

score 2 · Accepted Answer

You should work with two lists, one for the cart and one for the products. Use 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><divng-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>