使用角度js的评论系统

时间:2015-06-18 12:04:05

标签: javascript jquery angularjs

我是初学者,我在使用角度js创建评论表单时遇到问题。我在空数组中得到了输入值。但我不知道是要推送所提取的内容,以便它将显示在网页中(在blockquote内)。请给出一个简单易懂的答案

HTML

<tr>

的JavaScript

<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>

1 个答案:

答案 0 :(得分:0)

您的JavaScript中有很多错误:

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

<强>解决方案:

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

最终剧本:

(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}
];