index.html
<body ng-app="SuggestionBox" ng-controller="HomeController" ng-repeat="post in posts">;
<h1>{{helloWorld}}</h1>;
<p>
<span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)></span> Upvotes: {{post.upvotes}}
</p>;
<form ng-submit="addSuggestion()" style="margin-top: 50px">;
<h3> Submit Your Suggestion </h3>;
<div class="form-group">;
<input type="text" class="form-control" placeholder="Great ideas here" ng-model="title"></input>;
</div>;
<button type="submit" class="btn btn-primary">Suggest</button>;
</form>;
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>;
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>;
<!-- Services -->
<script type="text/javascript" src="js/services/suggestions.js"></script>;
</body>;
suggestions.js
app.factory('suggestions', [function() {
var demoSuggestions = {
posts: [
{
title: 'Free pizza at club meetings',
upvotes: 15,
comments: [],
},
{
title: 'End all club emails with Laffy Taffy jokes',
upvotes: 9,
comments: [],
},
{
title: 'Retrofit water fountain with Gatorade',
upvotes: 7,
comments: [],
},
{
title: 'Sing Bon Jovi\'s "Living on a Prayer" halfway through meetings',
upvotes: 3,
comments: [],
},
]
};
return demoSuggestions;
}]);
app.js
var app = angular.module('SuggestionBox', []);
HomeController
app.controller('HomeController', ['$scope', 'suggestions', function($scope) {
$scope.helloWorld = "Suggestions Box";
$scope.posts = "suggestions.posts";
$scope.addSuggestion = function() {
//if input empty, don't submit
if(!$scope.title || $scope.title === "") {
return;
}
//push suggestion posts in suggestions.js
$scope.posts.push({
title: $scope.title,
upvotes: 0,
});
//after submit, clear input
$scope.title = '';
};
}]);
can anyone please tell me where did I do wrong?