1

necesito poder cargar una tabla con productos.

El sistema funciona de la siguiente manera: Tengo un select en el cual figuran todos los productos (mas de 100) y cuando le hago click a uno lo debe cargar automáticamente en una tabla que se encuentra abajo (una especie de carrito) para que al finalizar la selección de productos yo aprete en "Generar Pedido" y pueda enviar eso.

Me podrían dar una mano de como hacer algo así? Pense en tener un $scope.pedido e ir llenándolo con otros $scope.producto pero no se bien como hacer algo del estilo.

2 respuestas 2

1

A continuación puedo darte una guía de como puedes resolver tu problema y puede que el siguiente código te ayude a mejorar tus resultado, lo que tu necesitas es tener una variable definida algo como: $scope.itemArray = [], donde puedas almacenar los items que vallas agregando al carrito con la funcion push(), puedes ver el código, para que te hagas una idea, quedo atento.

PD: Este código es totalmente AngularJs

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {


    $scope.alert = false;
    $scope.itemsToCar = [];
    $scope.items = {
        "productos": [ 
            {
                "cantidad": "2",
                "idProducto": 1,
                "descripcion": "Papel de cocina",
                "precio": 300000
            },
            {
                "cantidad": "5",
                "idProducto": 2,
                "descripcion": "Juguetes de bebe",
                "precio": 20000
            },
            {
                "cantidad": "23",
                "idProducto": 3,
                "descripcion": "Pelotas",
                "precio": 466000
            },
            {
                "cantidad": "7",
                "idProducto": 4,
                "descripcion" : "Ropa de hombre",
                "precio": 15620
            }
        ],
        
        "carros": [ 
            {
                "cantidad": "42",
                "idProducto": 1,
                "descripcion": "Carros Kia",
                "precio": 3000000
            },
            {
                "cantidad": "56",
                "idProducto": 2,
                "descripcion": "Carros Mazda",
                "precio": 2000000
            },
            {
                "cantidad": "105",
                "idProducto": 3,
                "descripcion": "Carros TOYOTA",
                "precio": 4660000
            },
            {
                "cantidad": "7",
                "idProducto": 4,
                "descripcion" : "Camionetas",
                "precio": 1562000
            }
        ]        
    }

    $scope.mostrarInformacion = function(description) {
        $scope.showInfoTable = description;
        $scope.alert = false;
    }

    $scope.alerta = function(item) {
        $scope.item = item;
        $scope.alert = true;
        $scope.itemsToCar.push(item);
    }       
    
});
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <div class="container">
        <select 
            class="custom-select" 
            name="itemDescripcion" 
            ng-model="itemSelected" 
            ng-change="mostrarInformacion(itemSelected)" 
            style="margin: 20px 0px;">

            <option value="" disabled selected>Tipo de item</option>
            <option ng-value="y" ng-repeat="(categoria, y) in items">{{ categoria }}</option>

        </select>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Cantidad</th>
                    <th scope="col">idProducto</th>
                    <th scope="col">Descripcion</th>
                    <th scope="col">Precio</th>
                    <th scope="col">Agregar al carrito</th>
                </tr>
            </thead>
          <tbody>
            <tr ng-repeat="item in showInfoTable">
                <td scope="row" ng-bind="item.cantidad"></td>
                <td ng-bind="item.idProducto"></td>
                <td ng-bind="item.descripcion"></td>
                <td ng-bind="item.precio | currency"></td>
                <td>
                    <button type="button" class="btn btn-primary" ng-click="alerta(item)">Add</button>
                </td>
            </tr>
          </tbody>
        </table>
        <div class="alert alert-primary" role="alert" ng-if="alert">
          Se ha agregado el item <strong>{{ item.descripcion }}</strong> al carrito
        </div>
        <h2>Item en el carrito: {{ itemsToCar.length }}</h2>
        <pre>
            {{ itemsToCar | json }}
        </pre>
    </div>
</body>
</html>

3
  • Genial! Es exactamente eso, muchas gracias!! Ahora estoy tratando de eliminar algún elemento del carrito :)! el 17 ene. 2019 a las 14:20
  • @JuanManuel245 y ya sabes como hacerlo? te puedo ayudar.
    – zerokira
    el 18 ene. 2019 a las 12:34
  • Ya lo pude resolver! Muchas Gracias el 18 ene. 2019 a las 15:43
0

Me autorespondo:

1) Creo e inicializo la variable: var carrito = [];

2) Le hago un push con los datos que vienen por variable, en este caso producto

productoCarrito.push({
      'cant' : 1,
      'prod' : producto.id,
      'desc' : producto.descripcion,
      'precio' : 0

    }); 
2
  • Esta solución te ha servidor para tu pregunta?
    – zerokira
    el 16 ene. 2019 a las 19:26
  • Si! pero no se como cerrar el post! el 16 ene. 2019 a las 19:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.