AngularJS Reviews

by Emmanuel Garcia

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="ReviewController as reviewCtrl">
    <div class="container">
        <h1>Reviews</h1>
        <ul class="list-unstyled">
            <li ng-repeat="review in reviewCtrl.reviews">
                <blockquote> 
                    <strong>{{review.stars}} Stars</strong>
                    {{review.body}} 
                    <cite class="clearfix">—{{review.author}} on {{review.createdOn | date}}</cite>
                </blockquote>
            </li>
        </ul>
        
        <form name="reviewForm" ng-submit="reviewForm.$valid && reviewCtrl.addReview(review)" novalidate>
            <blockquote ng-show="reviewCtrl.review"> 
                <strong>{{reviewCtrl.review.stars}} Stars</strong>
                {{reviewCtrl.review.body}} 
                <cite class="clearfix">—{{reviewCtrl.review.author}}</cite>
            </blockquote>
            
             <h4>Submit Review</h4>
    
            <fieldset class="form-group">
                <select ng-model="reviewCtrl.review.stars" class="form-control" ng-options="stars for stars in [5,4,3,2,1]" title="Stars" required>
                    <option value="">Your rating</option>
                </select>
            </fieldset>
            <fieldset class="form-group">
                <textarea ng-model="reviewCtrl.review.body" class="form-control" placeholder="Your review" title="Review" required></textarea>
            </fieldset>
            <fieldset class="form-group">
                <input ng-model="reviewCtrl.review.author" type="email" class="form-control" placeholder="Your email address" title="Email" required>
            </fieldset>
            <fieldset class="form-group">
                <input type="submit" class="btn btn-primary pull-right" value="Submit Review">
            </fieldset>
        </form>
    </div>
</body>

CSS

.ng-invalid.ng-dirty {
    border-color:#FA787E;
}

.ng-valid.ng-dirty {
    border-color:#78FA89;
}

JavaScript

(function () {
    var app = angular.module('myApp', []);
    var reviews = [{
        stars: 1,
        body: "This is the review content.",
        author: "[email protected]",
        createdOn: 1397490980837
    }, {
        stars: 1,
        body: "This is the review content.",
        author: "[email protected]",
        createdOn: 1397490980837
    }, {
        stars: 1,
        body: "This is the review content.",
        author: "[email protected]",
        createdOn: 1397490980837
    }];

    app.controller('ReviewController', function () {
        this.review = {};
        this.reviews = reviews;

        this.addReview = function (reviews) {
            this.review.createdOn = Date.now();
            this.reviews.push(this.review);
            this.review = {};
        };
    });
})();