Calculation using Angular JS

Asked

Viewed 526 times

1

inserir a descrição da imagem aquiI managed with the help of Esmigol to solve one of the problems and I am insisting here because I did not find anything on the internet that can help me. There are few examples of what I need on the Internet. The line calculation is ok (quantity x unit value) plus the sum and subtraction of the Total Value I’m picking up. What I’m doing wrong [![

$scope.valorClaro = [
        {id: 1, gb: 0, qtd: '', preco: 39.99, descricao: "Ligações Ilimitadas", operadora: "Tim"},
        {
            id: 2,
            gb: 0.5,
            qtd: '',
            preco: 45.99,
            descricao: "Ligações Ilimitadas + WhatsApp + SMS + Conteúdo Digital",
            operadora: "Claro"
        }
    ]

    $scope.soma = 0;

    $scope.multiplicaValor = function (index) {
        index.totalLinha = index.qtd * index.preco;
        angular.forEach($scope.valorClaro, function () {
            $scope.soma += index.qtd * index.preco;
        });
        console.log(index.totalLinha);
    }
<form name="formSimula">
    <div class="card mt-3">
        <div class="card-header font-weight-bold">
            <img src="./dist/images/icon-claro.png"> Simulador Planos Claro
            <span class="float-right" style="font-size: 30px;">{{soma | currency}}</span>
        </div>

        <table class="table table-hover mb-0" style="font-size: 0.875em;">
            <thead>
            <tr class="alert-warning d-flex">
                <th class="text-center col-1">GB</th>
                <th class="col-2">Valor</th>
                <th class="col-5">Descrição</th>
                <th class="col-2 text-center">Qtd Linhas</th>
                <th class="col-2">Total</th>
            </tr>
            </thead>
            <tbody>
            <tr class="d-flex font-weight-bold font-open" ng-repeat="claro in valorClaro">
                <td class="align-middle text-center col-1">{{claro.gb}}</td>
                <td class="col-2 align-middle">{{ claro.preco | currency}}</td>
                <td class="align-middle col-5">{{ claro.descricao}}</td>
                <td class="align-middle col-2 text-center">
                    <input type="text" class="form-control form-control-sm text-center" ng-model="claro.qtd"
                           ng-change="multiplicaValor(claro)">
                </td>
                <td class="align-middle col-2">
                    <input type="text" class="form-control form-control-sm text-center"
                           value="{{claro.totalLinha | currency}}">
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</form>

]2]2

jquery angularjs

  • Can you provide us with your HTML markup as well? At least this block is displayed in the image...

  • @Dinei includes HTML code

  • Your ng-model in the input has to make reference to the object claro: ng-model="claro.preco"

1 answer

0


You do not need to put an id in the input to get the entered value, add in your array another variable in the case below created with the quantity name, ai in the input put as ng-model this variable and in its function to multiply pass the index of the registry ai you will have access to the data in the function and can perform the multiplication of the line you want.

angular.module('App').controller("AppCtrl", function($scope, $http) {
  $scope.valorClaro = [{
      id: 1,
      gb: 0,
      quantidade: 0,
      preco: 39.99,
      descricao: "Ligações Ilimitadas",
      operadora: "Claro",
totalLinha: 0
    },
    {
      id: 2,
      gb: 0.5,
      quantidade: 0,
      preco: 45.99,
      descricao: "Ligações Ilimitadas + WhatsApp + SMS + Conteúdo Digital",
      operadora: "Claro",
totalLinha: 0
    }
  ];

  $scope.totalLinha;
  $scope.multiplicaValor = function(index) {
    index.totalLinha = index.quantidade * index.preco;
  }
});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</head>

<body>
  <table>
    <tbody>
      <tr class="d-flex font-weight-bold font-open" ng-repeat="claro in valorClaro">
        <td class="align-middle text-center col-1">{{claro.gb}}</td>
        <td class="col-2 align-middle">{{ claro.preco | currency}}</td>
        <td class="align-middle col-5">{{ claro.descricao}}</td>
        <td class="align-middle col-2 text-center">
          <input type="text" class="form-control form-control-sm text-center" id="linha" ng-model="claro.quantidade" ng-change="multiplicaValor(claro)">
        </td>
        <td class="align-middle col-2">
          <input type="text" class="form-control form-control-sm text-center" ng-model="claro.totalLinha">
        </td>
      </tr>
    </tbody>
  </table>



</body>

</html>

  • Perfect, would that be the sum total? $Scope.soma += index.totalLine;

  • This... could make a loop, (for or angular.Foreach) on your $Scope.valueClear and then $Scope.soma += indexDaList.quantity * indexDaList.price

  • Is that correct?

  • 1

    At first yes because the loop will go through all the array records and will do the amount times the price and add in a variable ($Scope.soma) which will result in the total value.

  • It worked out well worth the tip!

Browser other questions tagged jquery angularjs

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