Issue with .push adding suggestions


#1



I am stuck on the final project for anuglar. I am trying to add a form that takes the input and pushes it into the suggestoins array that was created earlier, in order to add a new suggestion to the list.


the form shows up and after typing in a suggestino and hitting sumbit the form clears (as it is supposed to) however the new suggestion is not added to list above.
I feel as though the issue lies in my index.html and the placement of the tag and or the use of ng-controller statement.

thanks for the help

Index.html

<!DOCTYPE html>
<html>
<head>
<title>Suggestion Box</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/
css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet"/>
 <script src="js/vendor/angular.min.js"></script>
</head>
<body ng-app="SuggestionBox">
    
    <div class="main" ng-controller="HomeController">
        <div class="container" ng-repeat="post in posts | orderBy:'-upvotes'">
            <ul>
                <li>{{post.title}} {{post.upvotes}}</li>
            </ul>
        </div>
     </div>
    
    <div class="container" ng-controller="omeController">   
        <div class="form">
    <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>
    </div>
    </div>
    



 
<!-- Modules -->
    <script src="js/app.js"></script>
 
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
    <script src="js/controllers/omeController.js"></script>
 
<!-- Services -->
    <script src="js/services/suggestions.js"></script>
 
</body>
</html>

HomeController.js

app.controller('HomeController', [
'$scope',
'suggestions',
 
function($scope, suggestions) {
    $scope.posts = suggestions.posts;
}]);

omeController.js

$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 = '';
};

suggestions.js

app.factory('suggestions', [function () {
    var demoSuggestions = {
        posts: [
            {
                title: 'Free pizza at club meetings',
                upvotes: 15,
            },
            {
                title: 'End all club emails with Laffy Taffy jokes',
                upvotes: 9,
            },
            {
                title: 'Retrofit water fountain with Gatorade',
                upvotes: 7,
            },
            {
                title: 'Sing Bon Jovi\'s "Living on a Prayer" halfway through meetings',
                upvotes: 3,
            }
        ]
    };
return demoSuggestions;
}]);

#2

You are missing a letter on this line.


#3

i don't see where i am missing it


#4

In the name of the controller. Shouldn't it be HomeController?


#5

No, if you look above I have two controllers one name HomeController and one named omeController.


#6

Mmm it's a bit confusing :slight_smile: you can join them together without causing any problems.
Moreover, your omeController is not initialized (i.e. app.controller statement and everything it entails is missing).


#7

i feel like that could be the issue


#8

So you have the action plan :sunglasses: Don't forget to re-attach HomeController to the body tag!

Let me know if you'll run into other problems.