how to add function in angular? I have searched long and hard but found nothing that helped yet. Where I wrong? I really do not know what to do. I wrote all the details below. I've tried and did not succeed.
error :
> TypeError: undefined is not a function > at addComment (http://localhost:19657/Scripts/app.js:20:30) > at http://localhost:19657/Scripts/angular.min.js:175:290 > at http://localhost:19657/Scripts/angular.min.js:192:357 > at k.$eval (http://localhost:19657/Scripts/angular.min.js:111:353) > at k.$apply (http://localhost:19657/Scripts/angular.min.js:112:121) > at HTMLFormElement.<anonymous> (http://localhost:19657/Scripts/angular.min.js:192:339) > at HTMLFormElement.x.event.dispatch (http://localhost:19657/Scripts/jquery-1.10.2.min.js:5:14129) > at HTMLFormElement.v.handle (http://localhost:19657/Scripts/jquery-1.10.2.min.js:5:10873)
My code :
Html Code :
<div ng-app="store" ng-controller="StoreController as item" dir="ltr">
<div ng-repeat="product in item.products">
<div ng-hide="product.cantBuy">
<img style="max-width: 100px" ng-src="{{product.iamge.full}}" />
<p>{{product.name}}</p>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{active:panel.isSelected(1)}">
<a ng-click="panel.selectTab(1)">ِDiscription</a>
</li>
<li ng-class="{active:panel.isSelected(2)}">
<a ng-click="panel.selectTab(2)">Price </a>
</li>
<li ng-class="{active:panel.isSelected(3)}">
<a ng-click="panel.selectTab(3)">Comments </a>
</li>
</ul>
<br />
<div class="panel" ng-show="panel.isSelected(1)">
<h3>Comments : </h3>
<p>{{product.description}}</p>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h3>Price : </h3>
<p>{{product.price}}</p>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<h3>Comments : </h3>
<blockquote ng-repeat="comment in product.comments">
<p>Star : {{comment.star}}</p>
<p>Name : {{comment.name}}</p>
<p>Email : {{comment.mail}}</p>
<p>Comment : {{comment.comment}}</p>
</blockquote>
<br/>
<h5>Send Comment : </h5>
<form ng-controller="CommentController as commentCtrl"
ng-submit="commentCtrl.addComment(product)">
<blockquote>
<p>Star : {{commentCtrl.comment.star}}</p>
<p>Name : {{commentCtrl.comment.name}}</p>
<p>Email : {{commentCtrl.comment.mail}}</p>
<p>Comment : {{commentCtrl.comment.comment}}</p>
</blockquote>
<p>Star : </p>
<select class="form-control" ng-model="commentCtrl.comment.star">
<option value="1">1 Star</option>
<option value="2">2 Star</option>
<option value="3">3 Star</option>
<option value="4">4 Star</option>
<option value="5">5 Star</option>
</select>
<p>Name : </p>
<input class="form-control" type="text" ng-model="commentCtrl.comment.name" />
<p>Email : </p>
<input class="form-control" type="email" ng-model="commentCtrl.comment.mail" />
<p>Comment : </p>
<textarea class="form-control" ng-model="commentCtrl.comment.comment"></textarea>
<br />
<br />
<input class="btn btn-primary" type="submit" value="Send Comment" />
</form>
</div>
</section>
<br />
<button ng-show="product.addBasket">Add To Basket</button>
</div>
</div>
</div>
app.js file :
var app = angular.module('store', []);
app.controller('StoreController', function () {
this.products = shirts;
});
app.controller('PanelController', function () {
this.tab = 1;
this.selectTab = function (setTab) {
this.tab = setTab;
}
this.isSelected = function (checkSelectTab) {
return this.tab === checkSelectTab;
}
});
app.controller('CommentController', function () {
this.comment = {};
this.addComment=function(product) {
product.comments.add(this.comment);
}
});
var shirts = [
{
name: 'Adiddas'
price: '10',
description: '.........',
addBasket: true,
cantBuy: false,
iamge: {
full: '.........'
},
comments: [
{
star:3,
name: "Jack",
mail: '[email protected]',
comment:'.......'
},
{
star: 2,
name: "Sara",
mail: "[email protected]",
comment: '.........'
}
]
}
];
