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.