Skip to content

Instantly share code, notes, and snippets.

@terrancebryant

terrancebryant/jsbin.hicax.css

Created May 20, 2014 00:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save terrancebryant/c4fc1154b5332a5f3341 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save terrancebryant/c4fc1154b5332a5f3341 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.hicax.css
.ng-invalid.ng-dirty {
border-color: #FA787E;
}
.ng-valid.ng-dirty {
border-color: #78FA89;
}
Raw
jsbin.hicax.html
<!DOCTYPE html>
<html ng-app="store">
<head>
<meta name="description" content="Shaping up with Angular.js" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>Shaping up with Angular.js</title>
</head>
<body ng-controller="StoreController as store">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>{{product.name}}
<em class="pull-right">{{product.price | currency }}</em>
</h3>
<p><img ng-src="{{product.images[0].full}}" alt="Kats"/></p>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{active:panel.isSelected(1)}">
<a href ng-click="panel.selectTab(1)">Description</a>
</li>
<li ng-class="{active:panel.isSelected(2)}">
<a href ng-click="panel.selectTab(2)">Specifications</a>
</li>
<li ng-class="{active:panel.isSelected(3)}">
<a href ng-click="panel.selectTab(3)">Reviews</a>
</li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h4>Specifications</h4>
<blockquote>None yet</blockquote>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<h4>Reviews</h4>
<blockquote ng-repeat="review in product.reviews">
<p><b>{{review.stars}} Stars</b>
{{review.body}}</p>
<small>by: {{review.author}} on {{review.createdOn | date}}</small>
</blockquote>
<h5>Submit a Review</h5>
<form name="reviewForm" role="form" ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
<blockquote>
<p><b>{{reviewCtrl.review.stars}} Stars</b>
{{reviewCtrl.review.body}}</p>
<small>by: {{reviewCtrl.review.author}}</small>
</blockquote>
<div class="form-group">
<select ng-model="reviewCtrl.review.stars" placeholder="Rate th Product" required>
<option value="1" class="form-control">1 start</option>
<option value="2" class="form-control">2 start</option>
<option value="3" class="form-control">3 start</option>
<option value="4" class="form-control">4 start</option>
<option value="5" class="form-control">5 start</option>
</select>
</div>
<div class="form-group">
<textarea ng-model="reviewCtrl.review.body" class="form-control" required></textarea>
</div>
<div class="form-group">
<label>by:</label>
<input ng-model="reviewCtrl.review.author" type="email" class="form-control" required>
</div>
<div>reviewForm is {{reviewForm.$valid}}</div>
<input type="submit" value="Submit a Review" class="btn btn-primary">
</form>
</div>
</section>
</li>
</ul>
</div>
</div>
</div> <!-- End Container -->
</body>
</html>
Raw
jsbin.hicax.js
(function(){
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.products = gems;
});
app.controller('PanelController', function(){
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
app.controller('ReviewController', function() {
this.review = {};
this.addReview = function(product) {
this.review.createdOn = Date.now();
product.reviews.push(this.review);
this.review = {};
};
});
var gems = [
{
name: 'Dodecahedron',
price: 2.95,
canPurchase: false,
soldOut: true,
description: ' to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
images: [
{
full: 'http://placekitten.com/200/200',
thumb: 'http://placekitten.com/100/200'
},
{
full: 'http://placekitten.com/200/200',
thumb: 'http://placekitten.com/100/200'
}
],
reviews: [
{
stars: 5,
body: "I love the product!",
author: "terrancebryant85@gmail.com"
},
{
stars: 1,
body: "This product sucks",
author: "terrancebryant85@gmail.com"
}
]
},
{
name: 'Tanzinite',
price: 4.95,
canPurchase: false,
soldOut: false,
description: ' to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
images: [
{
full: 'http://placekitten.com/200/200',
thumb: 'http://placekitten.com/100/200'
},
{
full: 'http://placekitten.com/200/200',
thumb: 'http://placekitten.com/100/200'
}
],
reviews: [
{
stars: 2,
body: "This product was just ok",
author: "terrancebryant85@gmail.com"
},
{
stars: 1,
body: "This product sucks",
author: "terrancebryant85@gmail.com"
}
]
}
];
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment