0

Dentro de um ng-controller, quero que apareça uma variável, e não está aparecendo. Código HTML:

<div class="body" ng-controller="mercadoriaCarrinho as merc">
<span>Total dos produtos: {{merc.listaDoCarrinho.mercadoria.total}}</span> 
</div>

código AngularJS:

<script> angular.module('meumodulo',[])

.controller('mercadoriaCarrinho', function ($rootScope, $http){
$rootScope.listaDoCarrinho=[];
$rootScope.mercadoria = {
	id: 'id',
	setor: 'setor',
	foto: 'foto',
	descr: 'descr',
	de: de,
	por: por,
	mercadoria: '0',
	quantidade: 0,
	total: '5',
	boto: -1
}

$rootScope.listaDoCarrinho.push($rootScope.mercadoria);
});

3
  • Amigo, uma observação: Na ultima linha vc declarou .push($rootScope.mercadoria0); mas dua variável é rootScope.mercadoria. Commented 26/09/2017 às 0:42
  • Obrigado pelo aviso, foi um erro de digitação. Está $rootScope.mercadoria0 e não estou conseguindo mesmo assim...
    – Gymo
    Commented 26/09/2017 às 0:55
  • 1
    Alguma resposta ajudou a resolver o problema e pode sanar dúvidas similares de outros usuários? Caso positivo não esqueça de marcar a resposta como aceita. Pra fazer isso é só clicar no ✓ do lado esquerdo da mesma (abaixo do indicador de up e down votes).
    – Sorack
    Commented 2/08/2018 às 13:36

2 Respostas 2

1

O problema é que você está utilizando o $rootScope no html. O ideal é não utilizar $rootScope e sim o this para compartilhar dados com a view. Você também está usando o push no array, portanto não pode acessar sua variável pelo nome, e sim por uma posição. Altere seu controller para o seguinte:

angular
  .module('meumodulo',[])
  .controller('MercadoriaCarrinhoController', MercadoriaCarrinhoController);

MercadoriaCarrinhoController.$inject = ['$http'];

function MercadoriaCarrinhoController($http){
  var vm = this;

  vm.listaDoCarrinho = {};
  _iniciar();

  function _iniciar() {
    var mercadoria = {
      id: 'id',
      setor: 'setor',
      foto: 'foto',
      descr: 'descr',
      de: de,
      por: por,
      mercadoria: '0',
      quantidade: 0,
      total: '5',
      boto: -1
    }

    vm.listaDoCarrinho.mercadoria = mercadoria;
  }
}

E a div no seu html:

<div class="body" ng-controller="MercadoriaCarrinhoController as vm">
  <span>Total dos produtos: {{vm.listaDoCarrinho.mercadoria.total}}</span> 
</div>

Se quiser manter a implementação por array altere sua implementação para o seguinte:

angular
  .module('meumodulo',[])
  .controller('MercadoriaCarrinhoController', MercadoriaCarrinhoController);

MercadoriaCarrinhoController.$inject = ['$http'];

function MercadoriaCarrinhoController($http){
  var vm = this;

  vm.listaDoCarrinho = [];
  _iniciar();

  function _iniciar() {
    var mercadoria = {
      id: 'id',
      setor: 'setor',
      foto: 'foto',
      descr: 'descr',
      de: de,
      por: por,
      mercadoria: '0',
      quantidade: 0,
      total: '5',
      boto: -1
    }

    vm.listaDoCarrinho.push(mercadoria);
  }
}

E a div no seu html:

<div class="body" ng-controller="MercadoriaCarrinhoController as vm">
  <span>Total dos produtos: {{vm.listaDoCarrinho[0].total}}</span> 
</div>

Utilize o vm apenas para as variáveis que você necessita que sejam impressas na tela, caso contrário utilize var.

1

Amigo, quando você faz o push a sua variável fica assim:

[{"id":"id","setor":"setor","foto":"foto","descr":"descr","de":"de","por":"por","mercadoria":"0","quantidade":0,"total":"5","boto":-1}]

para que se possa exibir o total a forma de acesso será;

 total:{{merc.listaDoCarrinho[0]['total']}}

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 .