Angular issue

Question

Not sure if anyone on here knows about Angular such this will be a class that will be introduced in Nov by tree house. But if there is anyone that has some Angular experience, I was wondering if someone can help me with my issue. Right now I have a simple review form created but when I submit the form the data is cleared when posted to the page. It provideds the html information but nothing in my experssions i.e {{reviewCtrl.review.author}}.

here is the following code

<!DOCTYPE html>
<html lang="en" ng-app="store"><!-- This runs the app module when the document loads --> 
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
   <!-- StoreController is the name of the ng-controller, 'as' is the key word, 'store' is the alis that will be used --> 
  <body ng-controller="StoreController as store">
   <div class="container">
    <div class="row" id="first-row">
      <div class="col-md-4" ng-repeat="product in store.products">
        <h1>{{product.name}}</h1>
        <h5>{{product.tagLine}}</h5>
        <ul class="price-name">
          <li><p>{{product.itemName}}</p></li>
          <li><p class="items-price">${{product.price}}</p></li>
        </ul>
        <img class="prod" ng-src="{{product.images[0].full}}">
        <button ng-show="store.product.canPurchase">Add to Cart</button>
        <section ng-controller="PanelController as panel">
          <ul class="nav nav-pills"><!-- if you want to initialize a tab so when you refresh it shows use ng-init="tab = #" --> 
            <li role="presentation" ng-class="{ active: panel.isSelected(1)}">
                <a href="#" ng-click="panel.selectTab(1)">Descriptions</a>
            </li>
            <li role="presentation" ng-class="{ active: panel.isSelected(2)}">
              <a href="#" ng-click="panel.selectTab(2)">Specifications</a>
            </li>
            <li role="presentation" ng-class="{ active: panel.isSelected(3)}">
              <a href="#" ng-click="panel.selectTab(3)">Reviews</a>
            </li>
          </ul> 
          <div class="panel" ng-show="panel.isSelected(1)">
            <h4>Description</h4>
            <p>{{product.description}}</p>
          </div>
          <div class="panel" ng-show="panel.isSelected(2)">
            <h4>Specifications</h4>
            <blockquote>None yet</blockquote>
          </div> 
          <div class="panel" ng-show="panel.isSelected(3)">
              <h4>Reviews</h4>
              <h4>Submit a Review</h4>

            <form name="reviewForm" novalidate ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)">
              <blockquote ng-show="reviewCtrl" ng-repeat=" review in product.reviews">
                <b>Stars: {{reviewCtrl.review.stars}}</b>
                <p>{{reviewCtrl.review.body}}</p>
                <cite>by: {{reviewCtrl.review.author}}</cite>
              </blockquote>
              <select class="form-control" ng-model="reviewCtrl.review.stars" ng-options="stars for stars in [5,4,3,2,1]" title"Stars">
                <option value="">Rate the Product</option>
              </select>
              <textarea placeholder="Write a short review of the product..." ng-model="reviewCtrl.review.body"></textarea>
              <input ng-model="reviewCtrl.review.author" type="email" placeholder="example@email.com">
              <input type="submit" class="btn" value="Submit">
            </form>
          </div>         
        </section>
    </div>
    </div>
   </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>

And here is my JavaScript

//Angular is written in modules, here is an example of a module in Angular
//It is good practice to wrap your js code inside a function wrapper
(function(){
    //angular -> calls the Angular.js file and creates a new module
    //'store' is the name of the angular module 
    //[ ] - > this is where the dependencies go
    var app = angular.module('store', []); 

    //This is creating the controller named StoreController 
    app.controller('StoreController', function(){
        //create the property of of this controller 
        this.products = gems; 

    }); 

    //App controller for the panel controller 
    app.controller('PanelController', function(){
        this.tab = 1; 

        this.selectTab = function(setTab){
            this.tab = setTab; 
        }; 

        this.isSelected = function(checkTab){
            return this.tab === checkTab; 
        };
    }); 

    app.controller('ReviewController', function(){
        //Initialize review and assign an empy object to it
        this.review = {}; 

        //Assign a function with a parameter of product to addReviews property
        this.addReview = function(product){
            //Have the reviews property of product push the product review to the review arrary
            product.reviews.push(this.review); 
            this.review = {}; 

        }; 

    }); 

    var gems = [
        {
            name: 'Local canon', 
            tagLine: '- an Angular store -', 
            itemName: 'White shirt',
            price: 2.95, 
            description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.', 
            canPurchase: false, 
            images: [
                {
                    full: 'img/white-shirt.png', 
                    thumb: 'img/white-shirt-thumb.png'
                }
            ],
            reviews: [

            ]
        }, 
        {
            name: 'Local canon', 
            tagLine: '- an Angular store -',
            itemName: 'Blue shirt',
            price: 5.95, 
            description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 
            canPurchase: false, 
            images: [
                {
                    full: 'img/white-shirt.png', 
                    thumb: 'img/white-shirt-thumb.png'
                }
            ]
        },
        {
            name: 'Local canon', 
            tagLine: '- an Angular store -',
            itemName: 'Red shirt',
            price: 10.95, 
            description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 
            canPurchase: false, 
            images: [
                {
                    full: 'img/white-shirt.png', 
                    thumb: 'img/white-shirt-thumb.png'
                }
            ]
        }
    ];  
})();

Any help is appreciated thank you guys.

Answer 1 · 2015-10-06T17:45:28Z

October 6, 2015 5:45pm

Thanks guys figure it out, but I still want to hear you thoughts. I did not create a place in my HTML for the data inside the array to show

below you can see the changes I made and it works now.

<div class="panel" ng-show="panel.isSelected(3)">
              <h4>Reviews</h4>
              <h4>Submit a Review</h4>
<!-- Added the blockquote to be able to retrieve the data inside the array --> 
              <blockquote ng-repeat=" review in product.reviews">
                <b>Stars: {{review.stars}}</b>
                <p>{{review.body}}</p>
                <cite>by: {{review.author}}</cite>
              </blockquote>

            <form name="reviewForm" novalidate ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)">
              <blockquote ng-show="reviewCtrl">
                <b>Stars: {{reviewCtrl.review.stars}}</b>
                <p>{{reviewCtrl.review.body}}</p>
                <cite>by: {{reviewCtrl.review.author}}</cite>
              </blockquote>
              <select class="form-control" ng-model="reviewCtrl.review.stars" ng-options="stars for stars in [5,4,3,2,1]" title"Stars">
                <option value="">Rate the Product</option>
              </select>
              <textarea placeholder="Write a short review of the product..." ng-model="reviewCtrl.review.body"></textarea>
              <input ng-model="reviewCtrl.review.author" type="email" placeholder="example@email.com">
              <input type="submit" class="btn" value="Submit">
            </form>

Welcome to the Treehouse Community

Looking to learn something new?

Caesar Bell

Caesar Bell

Angular issue

1 Answer

Caesar Bell

Caesar Bell