How to reference the variable within HTML through Angularjs?

Asked

Viewed 904 times

0

Inside an ng-controller, I want a variable to appear, and it is not appearing. HTML code:

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

angularjs code:

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

html angularjs controller

  • Friend, an observation: In the last line you declared . push($rootScope.mercadoria0); but two variable is rootScope merchandise..

  • Thanks for the warning, it was a typo. It’s $rootScope.mercadoria0 and I’m not getting it anyway...

  • 1

    Has any response helped solve the problem and can address similar questions from other users? If so, make sure to mark the answer as accepted. To do this just click on the left side of it (below the indicator of up and down votes).

2 answers

1


The problem is that you are using the $rootScope in the html. The ideal is not to use $rootScope and yes the this to share data with view. You’re also using the push in the array, therefore you cannot access your variable by name, but by a position. Change your controller to the following:

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

And the div in his html:

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

If you want to keep implementing by array change its implementation to the following:

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

And the div in his html:

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

Use the vm only for the variables you need printed on the screen, otherwise use var.

1

Buddy, when you push your variable like this:

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

in order to display the full form of access;

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

Browser other questions tagged html angularjs controller

You are not signed in. Login or sign up in order to post.