<!DOCTYPE html>
<html lang="es" ng-app="app">
<head>
<meta charset="UTF-8" />
<title>Inventario</title>
<link data-require="fontawesome@4.1.0" data-semver="4.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<link data-require="foundation@5.1.1" data-semver="5.1.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/normalize.css" />
<link data-require="foundation@5.1.1" data-semver="5.1.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css" />
<script data-require="foundation@5.1.1" data-semver="5.1.1" src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/js/foundation.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.17/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.2.17/angular-resource.min.js"></script>
<link rel="stylesheet" href="./style.css" />
</head>
<body ng-controller="printers">
<div class="fixed">
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1>
<a href="#/">Inventary</a>
</h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-form">
<div class="row collapse">
<div class="large-8 small-9 columns">
<input type="search" placeholder="Buscar" ng-model="query" />
</div>
<div class="large-4 small-3 columns">
<a href="#" class="alert button expand">Buscar</a>
</div>
</div>
</li>
</ul>
<ul class="right">
<li class="divider"></li>
<li>
<a href="#/impresora">Add Print <i class="fa fa-print"></i>
</a>
</li>
</ul>
</section>
</nav>
</div>
<article>
<ng-view></ng-view>
</article>
<script src="./script.js"></script>
</body>
</html>
// Code goes here
var app = angular.module("app", ["ngRoute"]);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'./printers.html'
})
.when('/impresora', {
templateUrl: './addPrint.html'
})
}])
.controller('printers', ['$scope', '$location',function($scope, $location){
$scope.datos = {};
$scope.printers = [
{marca:'Brother', modelo:'8880DN', toners:0},
{marca:'Brother', modelo:'3600', toners:1},
{marca:'HP', modelo:'Stylus', toners:10},
{marca:'HP', modelo:'Stylus x50', toners:6},
{marca:'Brother', modelo:'3600', toners:2},
{marca:'Epson', modelo:'Xp-202', toners:5},
];
$scope.save = function(){
$scope.printers.push($scope.datos);
$location.path('/');
}
$scope.inc = function(index){
++$scope.printers[index].toners;
}
$scope.des = function(index){
if($scope.printers[index].toners > 0)
--$scope.printers[index].toners;
}
$scope.del = function(index){
$scope.printers.splice(index, 1);
}
$scope.move = function (index){
document.querySelectorAll('.swipe-front')[index].classList.toggle('moving');
}
}]);
/* Styles go here */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0; }
body {
width: 100%;
height: 100%;
background-color: white;
font-family: 'Roboto', sans-serif;
color: #ecf0f1;
-webkit-user-select: none; }
ul li {
list-style: none; }
nav input {
height: 2.1em !important; }
article {
margin-top: 3em; }
.container {
position: relative;
width: 100%; }
.container form {
position: relative;
width: 30%;
margin: 10% auto 0 auto; }
.container form label {
color: black; }
.content {
padding: 18px;
box-sizing: border-box;
overflow: hidden;
position: relative; }
.swipe-element {
position: relative;
width: 100%;
height: 60px; }
.swipe-front {
position: absolute;
width: 100%;
height: 60px;
left: 0;
top: 0;
margin: 0;
padding: 8px;
box-sizing: border-box;
text-align: center;
color: #ecf0f1;
line-height: 44px;
vertical-align: center;
background-color: #F22613;
z-index: 2;
-ms-touch-action: none;
touch-action: none;
transform: translateX(0);
-webkit-transform: translateX(0);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease; }
.swipe-front span {
float: left;
width: 3em;
height: 2.5em;
background-color: grey;
border-radius: 3em; }
.moving {
transform: translateX(90%);
-webkit-transform: translateX(90%); }
.swipe-back {
position: absolute;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
height: 60px;
left: 0;
top: 0;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding: 0 10px;
box-sizing: border-box; }
.swipe-back button {
padding: 0;
display: inline-block;
width: 40px;
height: 40px;
background-color: #0f9d58;
border-radius: 100%;
border-style: none;
color: white;
font-weight: bold;
cursor: pointer;
outline: none; }
.swipe-back button:nth-child(2) {
background-color: #f4b400; }
.swipe-back button:nth-child(3) {
background-color: #cb4437; }
.promote-layer {
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
<section class="content" ng-repeat="print in printers | filter:query">
<div class="swipe-element">
<div class="swipe-back">
<button ng-click='inc($index)'>+</button>
<button ng-click='des($index)'>-</button>
<button ng-click='del($index)'>X</button>
</div>
<p class="swipe-front promote-layer" ng-click="move($index)">
<span>{{print.toners}}</span>
{{print.marca + ' ' + print.modelo}}
</p>
</div>
</section>
<section class="container">
<form ng-submit="save()">
<div>
<label>Marca:</label>
<input type="text" ng-model="datos.marca"/>
</div>
<div>
<label>Modelo</label>
<input type="text" ng-model="datos.modelo"/>
</div>
<div>
<label>Planta</label>
<input type="number" ng-model="datos.planta" min='0'/>
</div>
<div>
<label>Toners Disponibles</label>
<input type="number" ng-model="datos.toners" min='0'/>
</div>
<input type="submit" value="Añadir" class="button expand" />
</form>
</section>