Forms and models

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 = {};
    };
});