Jan
04
2016
By abernal
In this section, we will see how to create a form in order to add data and make a two way binding
Within the html file
<h4> Reviews </h4> <blockquote ng-repeat="review in product.reviews">...</blockquote> <form name="reviewForm"> <blockquote> <b>Stars: {{reviews.stars}}</b> {{review.body}} <cite>by: {{review.author}}</cite> </blockquote> <select ng-model="review.stars"> <option value="1">1 star</option> <option value="2">2 stars</option> ... </select> <textarea ng-model="review.body"></textarea> <label>by:</label> <input ng-model="review.author" type="email" /> <input type="submit" value="Submit" /> </form>
Two more binding examples
With checkbox
<input ng-model="review.terms" type="checkbox" /> I agree to the terms
With Radio Buttons
<input ng-model="review.color" type="radio" value="red" /> Red <input ng-model="review.color" type="radio" value="blue" /> Blue <input ng-model="review.color" type="radio" value="green" /> Green
Accepting Submissions
Within the html code
<h4> Reviews </h4> <blockquote ng-repeat="review in product.reviews">...</blockquote> <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)"> <blockquote> <b>Stars: {{reviewCtrl.reviews.stars}}</b> {{reviewCtrl.review.body}} <cite>by: {{reviewCtrl.review.author}}</cite> </blockquote> <select ng-model="reviewCtrl.review.stars"> <option value="1">1 star</option> <option value="2">2 stars</option> ... </select> <textarea ng-model="reviewCtrl.review.body"></textarea> <label>by:</label> <input ng-model="reviewCtrl.review.author" type="email" /> <input type="submit" value="Submit" /> </form>
Within the .js file
app.controller("ReviewController", function(){ this.review = {}; this.addReview = function(product){ product.reviews.push(this.review); this.review = {}; }; });