AngularJS Example: Carrito Compra Refactor
HTML
<div data-ng-app="MiCarrito">
<h1>Lista</h1>
<div ng-view=""></div>
<script type="text/ng-template" id="lista.html">
<h3>Productos</h3>
<a href="#/carrito">Carrito</a>
<carrito-contador></carrito-contador>
<br />
<div class="well span3" ng-repeat="producto in productos">
<h4>{{producto.Producto}}</h4>
<img class="" title="{{producto.Producto}}" src="{{producto.Imagen}}" />
<button class="btn btn-info btn-block" ng-click="agregar(producto)">
<i class="icon-plus-sign"></i> Precio: {{producto.Precio|formatoMoneda}}
</button>
</div>
</script>
<script type="text/ng-template" id="carrito.html">
<h3>Carrito</h3>
<a href="#/productos">Productos</a>
<br/>
<table class="table table-striped">
<thead>
<tr>
<th class="span1">Id</th>
<th class="span5">Producto</th>
<th class="span2">Cantidad</th>
<th class="span2">Precio</th>
<th class="span2">Total</th>
<td></td>
</tr>
</thead>
<tbody>
<tr class="well" ng-repeat="item in carrito">
<td>{{item.Producto.Id}}</td>
<td>{{item.Producto.Producto}}</td>
<td>
<input type="text" ng-model="item.Cantidad" />
</td>
<td>{{item.Producto.Precio|formatoMoneda}}</td>
<td>{{item.Cantidad * item.Producto.Precio|formatoMoneda}}</td>
<td>
<button class="btn btn-danger" ng-click="eliminar(item)">
<i class="icon-minus-sign"></i>
</button>
</td>
</tr>
<tr class="well">
<td></td>
<td></td>
<td>Total</td>
<td></td>
<td>{{precioTotal()|formatoMoneda}}</td>
</tr>
</tbody>
</table>
</script>
</div>
CSS
<!-- Ugly Hack due to jsFiddle issue: http: //goo.gl/BUfGZ --> <link rel="stylesheet" href="http://angularjs.org/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
html img {
width: 200px;
height: 150px;
}
JavaScript
var miCarrito = angular.module("MiCarrito", []);
miCarrito.controller(
'ProductosController', ['$scope', 'ProductosService', 'CarritoService',
function($scope, prodService, carService) {
$scope.titulo = "Tienda De Todo";
$scope.productos = [];
$scope.agregar = function(p) {
carService.agregar(p);
}
$scope.formatoMoneda = function(valor) {
var valor = parseFloat(valor);
return "S/." + Math.floor(valor) + "." + (valor * 100) % 100;
}
prodService.listar(function(data) {
$scope.productos = data;
});
}
]);
miCarrito.controller(
'CarritoController', ['$scope', 'CarritoService',
function($scope, carService) {
$scope.carrito = [];
carService.listar(function(data) {
$scope.carrito = data;
});
/*carService.carrito = $scope.carrito;*/
$scope.precioTotal = function() {
var total = 0;
angular.forEach($scope.carrito, function(item) {
total = total + (item.Cantidad * item.Producto.Precio);
});
return total;
};
$scope.eliminar = function(item) {
carService.eliminar(item);
};
}
]);
miCarrito.filter('formatoMoneda', function() {
return function(input) {
var out = "";
var valor = parseFloat(input);
out = "S/." + Math.floor(valor) + "." + ((valor * 100) % 100 + '00').substr(0, 2);
return out;
}
});
miCarrito.factory('CarritoService', ['$http', function($http) {
var servicio = {};
servicio.carrito = [];
var filtrar = function(id) {
for (var i = 0; i < servicio.carrito.length; i++) {
if (servicio.carrito[i].Producto.Id == id) {
return servicio.carrito[i];
}
};
return null;
};
servicio.agregar = function(p) {
var itemActual = filtrar(p.Id);
if (!itemActual) {
servicio.carrito.push({
Producto: p,
Cantidad: 1
});
} else {
itemActual.Cantidad++;
}
...