简体   繁体   中英

comment system using angular js

I am a beginner and i have a problem in creating a review form using angular js. I've got the input value in an empty array. but i don't know were to push that fetched content so that it will be displayed in the web page(inside the blockquote).please give a simple and understandable answer

HTML

<section class="container" ng-controller="storeController as store">
  <div class="row">
    <div class="col-md-12" style="margin-top:100px;" ng-controller="ReviewController as reviewCtrl">
      <div class="review_form">
        <blockquote>
          <h3>{{reviewCtrl.review.name}}</h3>
          <p>{{reviewCtrl.review.age}}</p>
          <p>{{reviewCtrl.review.mail}}</p>
        </blockquote>
      </div>
      <form class="col-md-4 form-group" ng-submit="reviewCtrl.addreview()">
        <input type="text" id="name" class="form-control" placeholder="name" ng-model="reviewCtrl.review.name"><br>
        <input type="text" id="age" class="form-control" placeholder="age" ng-model="reviewCtrl.review.age"><br>
        <input type="mail" id="mail" class="form-control" placeholder="mail" ng-model="reviewCtrl.review.mail"><br>
        <input type="submit" class="btn-block btn btn-success" value="Submit Review">

      </form>
    </div>

  </div>
</section>

JavaScript

(function(){
var app=angular.module('store',[]);
app.controller('storeController',function(){
    this.product=gem;
});
app.controller('ReviewController',function(){
}
this.review={};
this.addreview=function($scope){
    push(this.review);
    this.review={};
};
});
var gem=[
         {name:'Dodecaheadron',price:2.9,desc:[{comment:'this product is good        !'}],avail:true,stock:false},
         {name:'Octaheadron',price:2,desc:[{comment:'this product is good !'}],avail:false,stock:true},
         {name:'Tetraheadron',price:3.25,desc:[{comment:'this product is good !'}],avail:true,stock:false},
         {name:'Pentaheadron',price:4,desc:[{comment:'this product is good !'}],avail:true,stock:false}                                                                                                                        ];
})();

You have a lot of errors in your JavaScript:

app.controller('ReviewController',function(){
} // Guess you need to change to this });

Solution:

app.controller('ReviewController',function(){
});

Final Script:

(function(){
  var app=angular.module('store',[]);
  app.controller('storeController',function(){
    this.product=gem;
  });
  app.controller('ReviewController',function(){
  });
  this.review={};
  this.addreview=function($scope){
    push(this.review);
    this.review={};
  };
})();
var gem=[
  {name:'Dodecaheadron',price:2.9,desc:[
    {comment:'this product is good        !'}],avail:true,stock:false},
  {name:'Octaheadron',price:2,desc:[
    {comment:'this product is good !'}],avail:false,stock:true},
  {name:'Tetraheadron',price:3.25,desc:[
    {comment:'this product is good !'}],avail:true,stock:false},
  {name:'Pentaheadron',price:4,desc:[
    {comment:'this product is good !'}],avail:true,stock:false}
];

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM