JSFiddle - React, Tailwind, and code Playground

AngularJS Example: Sistema de Login

by Yolanda Robles

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
  <h2>Lista de la Compra</h2>
  <br/>
  <div ng-controller="CompraCtrl">
    <span>{{remaining()}} pendientes de {{carrito.length}}</span>
    [ <a href="" ng-click="archive()">archive</a> ]
      <br/>
      <br/>
      <p>Carrito:</p>
    <ul class="unstyled">
      <li ng-repeat="prod in carrito" class="fila">
        <!--<input type="checkbox" ng-model="todo.done">-->
        <span class="stock-{{prod.cantidad}}">{{prod.id}}</span>
        <span class="stock-{{prod.cantidad}}">{{prod.nombre}}</span>
      </li>
    </ul>  
    <br/>
    <br/>
    <p>Productos:</p>
    <ul class="unstyled">
      <li ng-repeat="prod in productos" class="fila">
        <a href="" ng-click="comprar(prod)">
        <!--<input type="checkbox" ng-model="todo.done">-->
        <span class="stock-{{prod.cantidad}}">{{prod.id}}</span>
        <span class="stock-{{prod.cantidad}}">{{prod.nombre}}</span>
        </a>
        </li>
    </ul>
    <br/>
    <form ng-submit="addTodo()">
      <input type="text" ng-model="idProd"  size="10"
          placeholder="ID">
      <br/>
      <input type="text" ng-model="nombreProd"  size="30"
             placeholder="Nombre">
      <br/>
      <input type="number" ng-model="cantidadProd"  size="10"
             placeholder="Cantidad">
      <br/>
      <input class="btn-primary" type="submit" value="Añadir">
    </form>
  </div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

.stock-0{
  color: red;
}

.fila{
    border-color:black;
    border-width:1px;
    border-style:solid;
}

JavaScript

function CompraCtrl($scope) {
  
   /* Entidades */
  $scope.carrito = [];
  
  $scope.productos = [
      {id:1, nombre:'leche', cantidad:30},
      {id:2, nombre:'pan', cantidad:0},
      {id:3, nombre:'huevos', cantidad:30},
      {id:4, nombre:'pasta', cantidad:30},
      {id:5, nombre:'arroz', cantidad:30}];

  /* Añadir un nuevo item a la lista */
  $scope.addTodo = function() {
      $scope.productos.push({id:$scope.idProd, nombre:$scope.nombreProd, cantidad:$scope.cantidadProd});
      $scope.idProd = '';
      $scope.nombreProd = '';
      $scope.cantidadProd = '';
  };

  /* Contador de cuantos quedan sin completar*/
  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  /* Elimina las tareas completadas */
  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
    
  $scope.comprar = function(prod) {
      
    var oldprod = $scope.carrito;
    $scope.carrito.push(prod);
      
  };
}