<!doctype html>
<html ng-app="store">
<head>
<meta charset="utf-8">
<title>Web Development</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="StoreController as GemStore">
<!-- This is where reviews cascade out and are showm -->
<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
<br/>
{{review.body}}
<br/>
<cite>by: {{review.author}}</cite>
</blockquote>
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)">
<blockquote>
<b> Stars: {{reviewCtrl.review.stars}}</b>
<br/>
<b> Review: {{reviewCtrl.review.body}}</b>
<br/>
<cite>by: {{reviewCtrl.review.author}}</cite>
</blockquote>
<my-stars controller="starsController" model="reviewCtrl.review.stars" style="margin-bottom:50px;margin-left:36px;width:350px;"></my-stars>
<br/> <br/>
<textarea ng-model="reviewCtrl.review.body" name="comments" id="comments" style="margin-bottom:10px;margin-left:36px;background-color:#FFFFCC;width:350px;height:200px;" placeholder="Comments/Reviews"></textarea>
<br/>
<label style="padding-right:10px">by:</label>
<input ng-model="reviewCtrl.review.author" name="email" id="email" type="email" style="margin-bottom:30px;background-color:#FFFFCC;width:350px;" placeholder="Email Address"/>
<br/>
<input type="submit" value="Submit" style="margin-left:36px;" />
<br/>
</form>
</body>
</html>
(function(){
var app = angular.module('store',[]);
app.controller('StoreController', function(){
this.products = gems;
});
var gems = [
{
name: 'Dodecahedron',
price: 2.95,
shine: 9,
rarity: 6,
color: '#EEE',
faces: 12,
description: 'Best Dodecahedron in the Alpha Quadrant',
canPurchase: true,
soldOut: false,
images: [
{full:'images/dodecahedron.jpg',
thumb:'images/thumbs/dodecahedron_thumb.jpg'
},
],
reviews:[],
},
];
app.controller('starsController', ['$scope', function($scope) {
$scope.review = {};
$scope.review.stars = '5 stars';
}])
app.directive('myStars', function() {
return {
restrict: 'E',
scope: { model: '=' },
template: '<select ng-model="model" ng-options="option.name as option.value group by option.type for option in options"></select>',
controller: function($scope) {
$scope.options = [
{ name: '1 star', value: '1 star', type:"Rate the product" },
{ name: '2 stars', value: '2 stars', type:"Rate the product" },
{ name: '3 stars', value: '3 stars', type:"Rate the product" },
{ name: '4 stars', value: '4 stars', type:"Rate the product" },
{ name: '5 stars', value: '5 stars', type:"Rate the product" }
];
}
};
/*
this.review = {};
this.addReview = function(product) {
product.reviews.push(this.review);
};
*/
});
app.controller("ReviewController", function() {
this.review = {};
this.addReview = function(product) {
product.reviews.push(this.review);
};
});
})();
/* Styles go here */