Multiply the value of an input by that of a list displayed with ng-repeat

2

I have an array of data that I show with an ng-repeat within a table.

This fills 4 fields of the 5 that I have currently declared, the following is an INPUT in which I obtain the value of parts requested by the client.

My question clearly would be: how can I multiply the value of the input (which are the pieces requested by the client) by the price that is on the list?

Also the point is that I need that value to be housed within a variable called total .

This is my view (start.html):

<div class="container">
<table class="table table-bordered table-condensed">
        <tr>
            <th>Nombre</th>
            <th>Existencia</th>
            <th>Precio</th>
            <th>Solicitado</th>
        </tr>
        <tr ng-repeat="producto in productos" ng-class="{'ocultar' : producto.ocultar}">
            <td>{{producto.nombre}}</td>
            <td>{{producto.existencia}}</td>
            <td>{{producto.precio | currency }}</td>
            <td><input type="number" ng-model="solicitado" min="1" max="5000" ng-change="comprar(producto)"></td>
            <td><h1>{{solicitado}}</h1></td>                
        </tr>           
        <tr>
            <td>Total de pedido: {{obtenerTotal()}}</td>
        </tr>
</table>


<h5></h5>
<button class="btn btn-success" ng-click="total()">Calcular Pedido</button> 
</div>

This is my controller

miAppAngular.controller('inicio', ['$scope', function ($scope) {

    $scope.saludo = "Carlos";
    $scope.solicitado = "";

    $scope.productos = [
        {
            id:1,
            nombre:"Negro Azulado 1",
            existencia: 20000,
            precio: 45
        },
        {
            id:2,
            nombre:"Negro Luminoso 2",
            existencia: 20000,
            precio: 45
        },
        {
            id:3,
            nombre:"Castaño Oscuro 3",
            existencia: 20000,
            precio: 45
        },
        {
            id:4,
            nombre:"Castaño Medio 4",
            existencia: 20000,
            precio: 45
        },
        {
            id:5,
            nombre:"Castaño Claro 5",
            existencia: 20000,
            precio: 45
        },
        {
            id:6,
            nombre:"Rubio Oscuro 6",
            existencia: 20000,
            precio: 45
        },
        {
            id:7,
            nombre:"Rubio Medio 7",
            existencia: 20000,
            precio: 45
        },
        {
            id:8,
            nombre:"Rubio Claro 8",
            existencia: 20000,
            precio: 45
        },
        {
            id:9,
            nombre:"Rubio Claro Claro 9",
            existencia: 20000,
            precio: 45
        },
        {
            id:10,
            nombre:"Rubio Extra Claro 10",
            existencia: 20000,
            precio: 45
        },
        {
            id:11,
            nombre:"Castaño Cenizo Claro 5.1",
            existencia: 20000,
            precio: 45
        },
        {
            id:12,
            nombre:"Rubio Cenizo Oscuro 6.1",
            existencia: 20000,
            precio: 45
        },
        {
            id:13,
            nombre:"Rubio Cenizo Medio 7.1",
            existencia: 20000,
            precio: 45
        },
        {
            id:14,
            nombre:"Rubio Cenizo Claro 8.1",
            existencia: 20000,
            precio: 45
        },
        {
            id:15,
            nombre:"Rubio Cenizo Claro Claro 9.1",
            existencia: 20000,
            precio: 45
        },
        {
            id:16,
            nombre:"Rubio Cenizo Extra Claro 10.1",
            existencia: 20000,
            precio: 45
        },
        {
            id:17,
            nombre:"Rubio Nacarado Medio 7.2",
            existencia: 20000,
            precio: 45
        },
        {
            id:18,
            nombre:"Rubio Nacarado Cenizo Claro 8.21",
            existencia: 20000,
            precio: 45
        },
        {
            id:19,
            nombre:"Rubio Nacarado Claro 9.2",
            existencia: 20000,
            precio: 45
        },
        {
            id:20,
            nombre:"Rubio Nacarado Cenizo Extra C 10.21",
            existencia: 20000,
            precio: 45
        }
    ]


    $scope.carrito = [];


    $scope.comprar = function (_item){
        _item.ocultar = true;

        $scope.carrito.push(_item);

    }

    $scope.obtenerTotal = function(){
        var total = 0;
        for (var i = 0; i < $scope.producto.length; i++) {
            var producto = $scope.producto[i];
            total += carrito.producto;
        }
        return total;
    }

}])
    
asked by Carlos Cuautle 09.02.2017 в 21:16
source

1 answer

0

In the list of products to each element, add two more properties:

$scope.productos = [
        {
            id:1,
            nombre:"Negro Azulado 1",
            existencia: 20000,
            precio: 45,
            cantidad: 0, //De esta manera
            total: 0 //De esta manera
        },
        {
            id:2,
            nombre:"Negro Luminoso 2",
            existencia: 20000,
            precio: 45,
            cantidad: 0, //De esta manera
            total: 0 //De esta manera
        }
];

And in the ng-model of the input set as follows ng-model="producto.cantidad" when you send to call the buy () method with the ng-change

$scope.comprar = function (_item){
        _item.ocultar = true;
        _item.total = _item.cantidad * _item.precio;

        $scope.carrito.push(_item);

    }

The following code:

<td>Total de pedido: {{obtenerTotal()}}</td>

Change it for this:

<td>Total de pedido: {{precioTotal | currency}}</td>

And you will create the following function in the controller to calculate the Order

$scope.total = function(){
    $scope.precioTotal = 0;
    $scope.productos.map(function(producto){
       $scope.precioTotal += producto.total;
    });
}
    
answered by 09.02.2017 в 22:39