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>