Adding values with Angularjs

Question

Adding values with Angularjs

Asked 10 years, 3 months ago

Viewed 2,218 times

2

I’m trying to do a simple college job but I’m caught on one thing, I have a list of objects with properties:

$scope.items = [
  {title: 'Chuveiro Elétrico', quantidade: 4, potencia: 3500},
  {title: 'Ferro Elétrico', quantidade: 1, potencia: 1000},
  {title: 'Ar condicionado', quantidade: 2, potencia: 1900}
];

And I needed to create a function to only add up the values of the potentials of each item, if someone has some simple solution, or tell me the way to solve it.

function CartCtrl($scope) {
  
  //******************************************************************************************************************************************************************CALCULO DAS CARGAS *********************************************************************************************************************************************//
  
  //setting variables to 0
  $scope.tamRes='0';
  $scope.comodos='0';
  $scope.tomadasCozinha='0';
  $scope.tomadas='0';
  $scope.ilum='0';
  
  $scope.calculaIluminacao = function(){
    $scope.ilum=parseInt($scope.comodos)*100;
    return $scope.ilum;
  }
  
  //functions 
  $scope.calculaTomCozinha = function(){
    if($scope.tamRes <= 15 ){
      $scope.potCozinha=600;
      return $scope.tomadasCozinha=1;
    } else if($scope.tamRes > 15 && $scope.tamRes <= 30 ){
      $scope.potCozinha=1200;
      return $scope.tomadasCozinha=2;
    }else if($scope.tamRes > 30 && $scope.tamRes <= 250 ){
       $scope.potCozinha=1800;
      return $scope.tomadasCozinha=3;
  }
  }
  
  $scope.calculaTomadas = function(){
    if($scope.tamRes <= 8 ){
      $scope.potTomada=100;
      return $scope.tomadas=1;
    } else if($scope.tamRes > 8 && $scope.tamRes <= 15 ){
      $scope.potTomada=300;
      return $scope.tomadas=3;
    }else if($scope.tamRes > 15 && $scope.tamRes <= 20 ){
      $scope.potTomada=400;
      return $scope.tomadas=4;
    }else if($scope.tamRes > 20 && $scope.tamRes <= 30 ){
      $scope.potTomada=500;
      return $scope.tomadas=5;
    }else if($scope.tamRes > 30 && $scope.tamRes <= 50 ){
      $scope.potTomada=600;
      return $scope.tomadas=6;
    }else if($scope.tamRes > 50 && $scope.tamRes <= 70 ){
      $scope.potTomada=700;
      return $scope.tomadas=7;
    }else if($scope.tamRes > 70 && $scope.tamRes <= 90 ){
      $scope.potTomada=800;
      return $scope.tomadas=8;
    }else if($scope.tamRes > 90 && $scope.tamRes <= 110 ){
      $scope.potTomada=900;
      return $scope.tomadas=9;
    }else if($scope.tamRes > 110 && $scope.tamRes <= 140 ){
      $scope.potTomada=1000;
      return $scope.tomadas=10;
    }else if($scope.tamRes > 140 && $scope.tamRes <= 170 ){
      $scope.potTomada=1100;
      return $scope.tomadas=11;
    }else if($scope.tamRes > 170 && $scope.tamRes <= 200 ){
      $scope.potTomada=1200;
      return $scope.tomadas=12;
    }else if($scope.tamRes > 200 && $scope.tamRes <= 220 ){
      $scope.potTomada=1300;
      return $scope.tomadas=13;
    }else if($scope.tamRes > 220 && $scope.tamRes <= 250 ){
      $scope.potTomada=1400;
      return $scope.tomadas=14;
    }
    }
  
  //Example Array
  $scope.items = [
    {title: 'Chuveiro Elétrico', quantidade: 1, potencia: 3500},
    {title: 'Ferro Elétrico', quantidade: 1, potencia: 1000}
  ];
  
  //Remove button
  $scope.remove = function(index) {
    $scope.items.splice(index,1);
  };
  
  $scope.in= { 
    title: '',
    quantidade:0,
    potencia:0
  };
  
  //Sum the potency
  $scope.$watchCollection('items',function() {
    $scope.total = 0;  
    angular.forEach($scope.items, function(value, key) {
      $scope.total += value.quantidade * value.potencia;
    })
  });
  
  
  $scope.addItem = function () {
    $scope.items.push($scope.in);
    $scope.in = {
      title: '',
      quantidade:0,
      potencia:0
    };
  };
  
  //******************************************************************************************************************************************************************CALCULO DE DEMANDA *********************************************************************************************************************************************//

};

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  list-style:none;
  text-decoration:none;
}

body {
	font: 15px/1.3 'Open Sans', sans-serif;
}

.wrap{
  width:600px;
  margin:0 auto;
  text-align:center;
  border-radius:4px;
  border:1px solid black;
}
h1{
  background:#34495e;
   color: #FFF;
	font-size: 64px;
	font-family: 'Cookie', cursive;
	font-weight: normal;
	line-height: 1;
	text-shadow: 0 3px 0 rgba(0,0,0,0.1);
}
h2{
  font-family: 'Cookie', cursive;
  font-size:44px;
  background:#34495e;
  color: #FFF;
  font-weight: normal;
	line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,0.1);
}
h3{
  font-family: 'Cookie', cursive;
  font-size:44px;
  background:#34495e;
  color: #FFF;
  font-weight: normal;
	line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,0.1);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Cookie|Open+Sans:400,700" rel="stylesheet">

<div ng-app ng-controller="CartCtrl">
  <div class="wrap">
    
  <h1>Cálculo de Demanda</h1>
    
  <div class="wrapAparelhos">
  <h2>Dados da residência</h2>
  Tamanho da residência (m²): <input type="text" ng-model="tamRes"> <br/>
  Quantidade de Cômodos: <input type="text" ng-model="comodos"></br>
  Quantidade de tomadas: <span ng-show="calculaTomadas()">{{tomadas}} - ({{potTomada}}W)</span> <br/>
    Quantidade de tomadas da cozinha: <span ng-show="calculaTomCozinha()">{{tomadasCozinha}} - ({{potCozinha}}W)</span></br>
  Iluminação residencial: <span ng-show="calculaIluminacao()">{{comodos}} - ({{ilum}}W) </span>
    
  <ul><h2>Aparelhos</h2>
  <li ng-repeat="item in items">
   <span>{{item.title}}</span></br>
   Quantidade: <input type="text" ng-model="item.quantidade"/><br/>
   Potência unitária : <span>{{item.potencia}}(W)</span><br />
   Potência total  : <span>{{item.potencia * item.quantidade }}(W)</span><br/>
    <button class="delete" ng-click="remove($index)">Remover</button>
   </li>
   </ul>
  
    <h3>Adicionar aparelhos</h3>
    Nome do aparelho : <input type="text" ng-model="in.title"></br>
		Quantidade : <input type="text" ng-model="in.quantidade"></br>
		Potência unitária : <input type="text" ng-model="in.potencia"></br>
    <button ng-click="addItem()">Adicionar</button>

  
<h3>Carga total instalada: {{total+potCozinha+potTomada+ilum}}(W)</h3>
<h3>Potência de demanda total: {{totalTomadasIlu}}(W)</h3>

  
  </div>
</div>

2 answers

1

You can use the $watchCollection inside your controller.

$scope.$watchCollection('items',function() {
  // Função disparada sempre que o objeto $scope.items sofrer alterações
  $scope.total = 0;  
  angular.forEach($scope.items, function(value, key) {
    $scope.total += value.quantidade * value.potencia;
  })
});

function CartCtrl($scope) {
  $scope.items = [
    {title: 'Chuveiro Elétrico', quantidade: 4, potencia: 3500},
    {title: 'Ferro Elétrico', quantidade: 1, potencia: 1000},
    {title: 'Ar condicionado', quantidade: 2, potencia: 1900}
  ];
  $scope.remove = function(index) {
    $scope.items.splice(index,1);
  };
  
  $scope.in= { 
    title: 'Title',
    quantidade:0,
    potencia:0
  };
  
  
   $scope.$watchCollection('items',function() {
    $scope.total = 0;  
    angular.forEach($scope.items, function(value, key) {
      $scope.total += value.quantidade * value.potencia;
    })
  });
  
  $scope.addItem = function () {
    $scope.items.push($scope.in);
    $scope.in = {
      title: '',
      quantidade:0,
      potencia:0
    };
  };
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<div ng-app ng-controller="CartCtrl">
  <div ng-repeat="item in items">
  	<span>{{item.title}}</span>
    <input type="text" ng-model="item.quantidade"/><br />
    Potência unitária : 
    <span>{{item.potencia}}</span><br />
    Potência total : <span>{{item.potencia * item.quantidade }}</span><br />
		<button ng-click="remove($index)">Apagar</button>
    <hr />
  </div>
  
	<form>
		Nome do aparelho : <input ng-model="in.title">
		Quantidade : <input ng-model="in.quantidade">
		Potência unitária : <input ng-model="in.potencia">
    <button ng-click="addItem()">+</button>
	</form>
  
  <p>Potência Total: {{total}}<p>
</div>

I think I understood the operation of this $watchCollection, it was what I needed, thanks :)

– haykou

2014/09/15 at 18:02

Browser other questions tagged javascript angularjs

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

by Felipe Santos • 53 points · Answer 1 · 2017-07-28T20:59:53+00:00

do so

let items = [
  {title: 'Chuveiro Elétrico', quantidade: 4, potencia: 3500},
  {title: 'Ferro Elétrico', quantidade: 1, potencia: 1000},
  {title: 'Ar condicionado', quantidade: 2, potencia: 1900}
];


var valor = 0;

items.filter(function(item){
    valor += item.potencia;
});