AngularJS II Carrito Compra
HTML
<div data-ng-app="MiCarrito">
<div class="well container-fluid" ng-controller="CarritoController">
<div class="row-fluid">
<div class="span7 row">
<h1>{{ tienda }}</h1>
<h3>Productos</h3>
<input type="text" ng-model='search'>
paginas
<a ng-click='setPage(1)'>1</a>
<a ng-click='setPage(2)'>2</a>
<br>
<div class="well span3" ng-repeat="p in productos">
<h4>{{ p.Producto }}</h4>
<img class="" title="alternativoImagen"
src="{{ p.Imagen }}" />
<button class="btn btn-info btn-block" ng-click="agregar(p)">
<i class="icon-plus-sign"></i>
Precio: {{ p.Precio | soles }}
</button>
</div>
</div>
<br/>
<div class="span5">
<h3>Carrito</h3>
<table class="table table-striped">
<caption>Carrito</caption>
<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>
</tr>
</thead>
<tbody>
<tr class="well" ng-repeat="item in carrito">
<td>{{ item.Id }}</td>
<td>{{ item.Producto }}</td>
<td>
<input type="text" name="cantidad" ng-model="item.Cantidad" />
</td>
<td>{{ item.Precio }}</td>
<td>{{...
CSS
</style> <!-- 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> <style>
html img{ width: 200px; height: 150px; }
JavaScript
angular.module("MiCarrito", []);
angular.module("MiCarrito").filter("soles", function(){
return function(input){
return "S/." + input;
};
});
angular.module("MiCarrito").controller(
'CarritoController', ['$scope',
function ($scope) {
$scope.tienda = "Tienda Pepito";
$scope.agregar = function(prod) {
var p = angular.copy(prod);
p.Cantidad = 1;
$scope.carrito.push(p);
};
$scope.setPage = function(numPage){
$scope.productos = productosStore
.filter(function(p,i){
return i < (numPage * 4) &&
i >= ((numPage-1) *4);
});
};
$scope.carrito = [];
var productosStore = [{"Id": "1", "Categoria": "Librería", "Producto": "Borrador Perfecto", "Precio": "0.5", "Imagen": "http://images.wikia.com/inciclopedia/images/5/57/Borrador.jpg"},
{"Id": "2", "Categoria": "Librería", "Producto": "Lápiz Carboncito", "Precio": "1", "Imagen": "http://cd1.dibujos.net/dibujos/pintados/201110/45bdaddccd13fdcfd61764cc91302190.png"},
{"Id": "3", "Categoria": "Librería", "Producto": "Regla Rectitud", "Precio": "1.2", "Imagen": "http://us.123rf.com/400wm/400/400/wayoutwest/wayoutwest0705/wayoutwest070500013/912524-una-regla-de-madera-de-30-centimetros-aislada-en-un-fondo-blanco-muevalo-de-un-tiron-encima-para-una.jpg"},
{"Id": "4", "Categoria": "Baño", "Producto": "Jabón Cochinin", "Precio": "1.5", "Imagen": "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Tualetsapo.jpg/200px-Tualetsapo.jpg"},
{"Id": "5", "Categoria": "Baño", "Producto": "Papel Higienico", "Precio": "0.7", "Imagen": "http://sobrecuriosidades.com/wp-content/uploads/2011/12/papel-higienico.jpg"},
{"Id": "6", "Categoria": "Alimentos", "Producto": "Leche Gloria", "Precio": "2.5", "Imagen": "http://www.connuestroperu.com/images/stories/cosas/alimentos/lacteos/lata_leche_gloria.jpg"},
{"Id": "7", "Categoria": "Alimentos", "Producto": "Mantequilla La Vaquita", "Precio": "2.8", "Imagen":...