<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/brunoscopelliti/pen/Bepum?depth=everything&order=popularity&page=12&q=shop&show_forks=false" />
<style class="cp-pen-styles">body {
background:White;
}
.ng-invalid {
border: 1px solid red;
}
#main {
cursor:default;
margin:0 auto 100px;
padding:10px 25px;
width:580px;
}
#main h1 {
font-size:24px;
padding-left:10px;
}
#main .sCart {
float:right;
padding-right:25px;
}
.sCart .quantity {
font-size:32px;
vertical-align:8px;
}
#items {
clear:both;
}
#main .item {
border:1px solid #999999;
display:inline-block;
margin:0 8px 15px;
width: 170px;
}
.item-int {
margin:0 auto;
padding:10px 0 30px;
}
.item-int h3 {
margin:0;
padding-left:10px;
}
.item-int img {
width:160px;
}
.item-int .data {
margin:5px 0;
text-align:center;
}
.data span {
font-size:12px;
padding:0 10px;
}
.right {
float:right;
}
.left {
float:left;
}
.note {
color:#444444;
font-size:13px;
text-align:right;
}</style></head><body>
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>My AngularJS App</title>
</head>
<body ng-controller="stageController">
<div id="main">
<div id="header">
<h1>{{title}}</h1>
<shopping-cart></shopping-cart>
</div>
<div id="items">
<div class="item" ng-repeat="i in items">
<div item-card item-title="{{i.title}}" item-src="{{i.src}}" item-price="{{i.price}}"></div>
</div>
</div>
<hr/>
<div id="footer">
<shopping-cart></shopping-cart>
</div>
</div>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js'></script>
<script >'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.directives']);
/* Controllers */
function stageController($scope) {
$scope.title = 'Planet Shop';
$scope.items = [{
title: 'Moon',
price: '9.99€',
src: '//resources.brunoscopelliti.com/codepen/images/moon.png'
}, {
title: 'Sun',
price: '29.99€',
src: '//resources.brunoscopelliti.com/codepen/images/sun.png'
}, {
title: 'Earth',
price: '19.99€',
src: '//resources.brunoscopelliti.com/codepen/images/earth.png'
}, {
title: 'Pluton',
price: '5.50€',
src: '//resources.brunoscopelliti.com/codepen/images/pluton.png'
}, {
title: 'Mars',
price: '24.00€',
src: '//resources.brunoscopelliti.com/codepen/images/mars.png'
}];
$scope.cartItems = [];
$scope.buyItem = function (title, price) {
var objAdded = {
title: title,
price: price
};
$scope.cartItems.push(objAdded);
}
}
/* Directives */
angular.module('myApp.directives', []).
directive('itemCard', function () {
// return the directive definition object
return {
scope: {
title: '@itemTitle',
price: '@itemPrice',
src: '@itemSrc'
},
controller: function ($scope, $element, $attrs, $location) {
$scope.addToCart = function (t, p) {
var mainScope = angular.element("#main").scope();
mainScope.buyItem(t, p);
return false;
};
},
replace: true,
template: '<div class="item-int"><h3>{{title}}</h3><div class="data"><img src="{{src}}" title="{{title}}"><span class="left">price: {{price}}</span><span class="right"><a ng-click="addToCart(title, price);">Add to cart</a></span></div></div>'
};
}).
directive('shoppingCart', function () {
return {
replace: true,
restrict: 'EACM',
template: '<div class="sCart"><img src="//resources.brunoscopelliti.com/codepen/images/cart.png" alt="Items: "/> <span class="quantity">{{cartItems.length}}</span></div>'
};
});
//# sourceURL=pen.js
</script>
</body></html>
