JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app= "store"ng-controller="StoreController as store">
						<blockquote ng-repeat="product in store.products">
							<b>{{product.rating}} stars</b>
							{{ product.description }} <br>
							<cite>-{{ product.name }}</cite>
						</blockquote>

						 <form class="form-horizontal">
						 <div class="form-group">
						 	<label class="control-label col-sm-2">Rating</label>
						 	<div class="col-sm-6">
						 		<select name="rating" class="form-control" ng-model="product.rating">
						 			<option value="5">5</option>
						 			<option value="4">4</option>
						 			<option value="3">3</option>
						 			<option value="2">2</option>
						 			<option value="1">1</option>	
						 		</select>
						 	</div>
						 </div>

						    <div class="form-group">
						      <label class="control-label col-sm-2" for="name">Nama:</label>
						      <div class="col-sm-6">
						        <input type="text" class="form-control" id="nama" placeholder="Nama Anda" ng-model="product.name">
						      </div>
						    </div>
						    <div class="form-group">
						      <label class="control-label col-sm-2" for="pwd">Deskripsi:</label>
						      <div class="col-sm-6">
						        <textarea class="form-control" cols="5" rows="3" ng-model="product.description"></textarea>
						      </div>
						    </div>
						    <div class="form-group">
						      <div class="col-sm-offset-2">
						        <button type="submit" class="btn btn-default">Submit</button>
						      </div>
						    </div>
						  </form>

JavaScript

var app = angular.module('store', [] );

app.controller('StoreController', function(){
	this.products 	= gem;
	this.newProduct = {};
});
	var gem = [
	{
		rating 		: 5,
		name 		: 'Dedi',
		description : 'hello world'
	},
	{
		rating 		: 5,
		name 		: 'Beckham',
		description : 'hello world'
	}
	
	];