Skip to content

Instantly share code, notes, and snippets.

@timwco
Created April 16, 2016 02:41
Show Gist options
  • Save timwco/25e38cba5e414bf89a4cc46d78df68a4 to your computer and use it in GitHub Desktop.
Save timwco/25e38cba5e414bf89a4cc46d78df68a4 to your computer and use it in GitHub Desktop.
AngularJS Workshop Templates - April 16th, 2016
<h3>Add A Product</h3>
<hr>
<form ng-submit="addProduct(product)">
<div class="form-group">
<input type="text" class="form-control" ng-model="product.name" placeholder="Product Name">
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="product.image" placeholder="ex: images/01.jpg">
</div>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" placeholder="Price" ng-model="product.price">
<div class="input-group-addon">.00</div>
</div>
<br>
<button type="submit" class="btn btn-primary">Add Product</button>
</form>
<br>
<div class="alert alert-success" ng-show="message">{{ message }}</div>
<h3>Your Cart</h3>
<hr>
<table class="table table-striped">
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr ng-hide="cartItems.length">
<td colspan="3">Please add something to your cart first!</td>
</tr>
<tr ng-repeat="item in cartItems" ng-show="cartItems.length">
<td>{{ item.name }}</td>
<td>{{ item.qty }}</td>
<td>${{ item.price }}</td>
</tr>
<tr class="success">
<td colspan="2">Cart Subtotal:</td>
<td>${{ totalPrice }}</td>
</tr>
</table>
<div class="cart">
<span class="alert alert-success" ng-show="cartMessage">{{ cartMessage }}</span>
<i class="glyphicon glyphicon-shopping-cart"></i>
<a href="/#/cart">Cart Items (0)</a>
</div>
<header class="jumbotron hero-spacer">
<p>Welcome to my online marketplace!</p>
</header>
<hr>
<div class="row text-center">
<div class="col-md-3 col-sm-6 hero-feature" ng-repeat="product in products">
<div class="thumbnail">
<img ng-src="{{ product.image }}" alt="{{ product.name }}">
<div class="caption">
<h3>{{ product.name }}</h3>
<p><a href="#" ng-click="addCart(product)" class="btn btn-primary">Buy for ${{ product.price }}</a></p>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment