Good morning. I'm trying to make an example application in AngularJS. I try to add comments to the products through the form that appears in each of the blocks of products. The problem is that the comment is not inserted, it appears blank. It only works when I insert it in the initial part of the HTML
'use strict';
/**
* @ngdoc function
* @name yoAngApp.controller:AboutCtrl
* @description
* # AboutCtrl
* Controller of the yoAngApp
*/
angular.module('yoAngApp')
.controller('AboutCtrl', function ($scope) {
$scope.rate = 5;
$scope.max = 10;
$scope.isReadonly = false;
$scope.products = [
{
img:"Image1",
title:"Mobile1",
content:"900",
button: "Comentar producto",
comments : [{name: "Name1", text: "Buen producto y diseno", star : 8}]
},
{
img:"Image2",
title:"Mobile2",
content:"340",
button: "Comentar producto",
comments : [{name: "Name2", text: "Buen producto y diseno", star : 3}]
},
{
img:"Image3",
title:"Mobile3",
content:"230",
button: "Comentar producto",
comments : [{name: "Name3", text: "Buen producto y diseno", star : 5}]
},
{
img:"Image4",
title:"Mobile4",
content:"180",
button: "Comentar producto",
comments : [{name: "Name4", text: "Buen producto y diseno", star : 10}]
},
{
img:"Image5",
title:"Mobile5",
content:"120",
button: "Comentar producto",
comments : [{name: "Name5", text: "Buen producto y diseno", star : 1}]
},
{
img:"Image6",
title:"Mobile6",
content:"185",
button: "Comentar producto",
comments : [{name: "Name6", text: "Buen producto y diseno", star : 6}]
}
];
$scope.addComment = function ($index) {
$scope.array = {name: $scope.username , text: $scope.usercomment , star: $scope.userrate};
$scope.products[$index].comments.push($scope.array);
};
});<div class="row ">
<div class="col-md-12">
<div ng-repeat="product in products">
<div class="col-md-4 div-block">
<img class="img-responsive img-circle img-block" ng-src="{{product.img}}" style="margin:auto;">
<h4>{{product.title}}</h4>
<p>{{product.content | currency}}</p>
<button ng-click="showComment = ! showComment">{{product.button}}</button>
<h4> All comment </h4>
<div class="col-md-12" ng-repeat="comment in product.comments" >
<div class="col-md-12" style="background-color: #d3d3d3; margin-top: 2%; margin-bottom: 2%">
<div class="col-md-12"><b>Name</b>: {{comment.name}}</div>
<div class="col-md-12"><b>Comment</b>: {{comment.text}}</div>
<div class="col-md-12" style="margin-bottom: 2%;"ng-init="x = comment.star"><uib-rating ng-model="x" readonly="true" max="10" aria-labelledby="default-rating"></uib-rating></div>
</div>
</div>
<div class="col-md-12">
<div ng-show="showComment" class="col-md-12" style="background-color: #e8e8e8;">
<form ng-submit="addComment($index)" novalidate class="css-form">
<h4>You comment</h4>
<div class="col-md-12"><b>Name</b>: {{username}}</div>
<div class="col-md-12"><b>Comment</b>: {{usercomment}}</div>
<div class="col-md-12">Name</b>:<br/><input type="text" ng-model="username" required /><br /></div>
<div class="col-md-12">Comment</b>:<br/><textarea ng-model="usercomment" /></textarea></div>
<uib-rating ng-model="userrate" max="10" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>
<div class="col-md-12" style="margin-bottom: 2%;"><input type="submit" value="Save" /></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>