Everytime when the visitor wants to place a comment on the website, the controller will randomly pick up a profile picture. Only the image of the first comment does not load (while the url showing in the console log is right). Anybody an idea how to get this thing done.
<html lang="en" ng-app="myApp">
<body>
<script type="text/ng-template" id="pages/forum.html">
<div ng-controller="Forum" class="forum-page">
<div class="col-lg-12">
<div id="comment-list" ng-repeat="comment in comments">
<div id="image-block">
<img id="profile-picture" ng-src="{{comment.image}}" alt="portfoliole-picture"/>
</div>
<div id="text-block">
<div class="comment-info name">{{comment.name}}</div>
<div class="comment-info" id="comment">{{comment.comment}}</div>
<div class="comment-info countries">{{comment.country}}</div>
</div>
</div>
<ng-form name="comment_box">
<img ng-src="{{dataObject.image}}" id="image-profile" alt="profile-picture" />
<input type="text" class="comment-form" id="name" ng-model="dataObject.name" ng-minlength="2" ng-maxlength="20" ng-required="true" placeholder="Name"/>
<select class="comment-form" ng-model="dataObject.country" ng-options="x.country as x.country for x in options" ng-required="true">
<option value="">-- Choose Country --</option>
</select>
<textarea type="text" class="comment-form countries" ng-model="dataObject.comment" rows="6" cols="90" ng-minlength="1" ng-maxlength="300" ng-required="true" placeholder="Comment"></textarea>
<span class="comment-form" id="remain_amount_of_letters">{{300-dataObject.comment.length}} Left</span>
<button class="comment-form comment-button" ng-disabled="comment_box.$invalid" ng-click="addComment()">Place comment</button>
</ng-form>
</div>
</div>
</script>
</body>
</html>
angular.module("forum-page", ["myApp"])
.controller("Forum", function($scope, $timeout) {
$scope.options = [{
id: 1,
country : "Angola"
},
{
id: 2,
country: "Argentina"
},
{
id: 3,
country: "België"
}];
$scope.comments = [
{
"name": "Kevin",
"comment": "Wat een mooi toestel vandaag ontvangen, zeer blij met mijn bestelling :)",
"country": "Nederland",
"image": "image/profile1.jpg"
},
{
"name": "Jason",
"comment": "What a great phone I received from Meizu, will surely come back to buy again in the future",
"country": "USA",
"image": "image/profile2.jpg"
},
];
$scope.addComment = function() {
$scope.comments.push($scope.dataObject);
var image_path = "image/profile";
var number = Math.floor(8 * Math.random() + 1);
var extension = ".jpg";
// $scope.path = image_path + number + extension;
$scope.dataObject = {
name: "",
comment: "",
country: $scope.options.country,
image: image_path + number + extension
};
console.log($scope.path);
};
});