Undefined string when I pass it in the function in controller

Question

This is my HTML:

<!doctype html>
<html ng-app='myApp'>
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="js/controllers.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

  </head>
  <body ng-controller='bodyController'>

    <div class="heading">
        <h1>My Social Website</h1>
        <hr>
    </div>

    <div class="postsCss">
        <div ng-repeat="post in posts | orderBy: '-votes'" class="mypost">
            <a ng-show="post.link" href="{{post.link}}">{{post.title}}</a>
            <span ng-hide="post.link"> {{post.title}}</span>
            </br>
            <li class="fa fa-thumbs-o-up" ng-click="upVote(post)"></li>
            <li class="fa fa-thumbs-o-down" ng-click="downVote(post)"></li>
            <span class="counter">{{post.votes}}</span><br>
            <span ng-show="post.comment"> {{post.comment}} </span>
            <br>
            <form ng-submit="addComment(post)" class="myform">
                <input type="text" placeholder="Add a Comment..." ng-model="comment"></input>
                <button class="button" type="submit">Comment</button>
            </form>
        </div>


        <h2>Add a New Post:</h2>
        <form ng-submit="addPost()" class="myform">
            <input type="text" placeholder="Add a Post" ng-model="title"></input><br>
            <input type="text" placeholder="Link" ng-model="link"></input><br>
            <button class="button" type="submit">Post</button>
        </form>
    </div>

  </body>
</html>

and this is my Controller.js:

var app = angular.module('myApp', []);
app.controller('bodyController',
function($scope) {
    $scope.posts = [
        { title: 'post 1', votes: 5 , comment: 'Very Nice' },
        { title: 'post 2', votes: 25, comment: 'good'      },
        { title: 'post 3', votes: 55, comment: 'Very Nice' },
        { title: 'post 4', votes: 15, comment: 'Very Nice' },
        { title: 'post 5', votes: 26, comment: 'Very Nice' }
    ];

    $scope.addPost = function(){
        if(!$scope.title || $scope.title ==='') { return; }
        $scope.posts.push({ 
            title: $scope.title, 
            link: $scope.link,
            comment: 'Very Nice',
            votes: 0 
        });
        $scope.title = '';
        $scope.link = '';
    };

    $scope.upVote = function(post){
        post.votes += 1;
    };

    $scope.downVote = function(post){
        if(post.votes <1) { return; }
        post.votes -= 1;
    };

    $scope.addComment = function(post){
        post.comment = $scope.comment;
    };
})

But when I click the comment button; the comment which is already there for debugging purpose doesn't gets changed but get removed and I checked it some other way; the comment that was coming from the HTML was undefined.

$scope.addComment = function(){ $scope.posts.comment.push('asd'); }; I tried this too. But its not even pushing 'asd' string in comments array. — Umer Javed
– Umer Javed, Commented Jan 22, 2016 at 18:32
This is now my posts array: $scope.posts = [ { title: 'post 1', votes: 5 , comment: [] }, { title: 'post 2', votes: 25, comment: [] }, { title: 'post 3', votes: 55, comment: [] }, { title: 'post 4', votes: 15, comment: [] }, { title: 'post 5', votes: 26, comment: [] } ]; — Umer Javed
– Umer Javed, Commented Jan 22, 2016 at 18:32

RichG · Accepted Answer · 2016-01-22 18:56:47Z

1

So the issue is that your $scope.comment is undefined when you're trying to set it, I have made a plnkr of it fixed, and yes you are going to want to have an array within the post object which holds all comments on a post and ng-repeat over that which will display all your comments. I tagged a newComment field onto the post object where the comment waits to get pushed into the array, Here are the changes to your HTML(You also need to track by $index to make sure that repeat entries wont break your code!):

        <span ng-show="post.comment" ng-repeat="comment in post.comment track by $index"> {{comment}} </span>
    <br />
    <form ng-submit="addComment(post)" class="myform">
      <input type="text" placeholder="Add a Comment..." ng-model="post.newComment" />
      <button class="button" type="submit">Comment</button>
    </form>
  </div

And the changes to the post object:

function($scope) {
  $scope.posts = [
      { title: 'post 1', votes: 5 , comment: ['Very Nice' ]},
      { title: 'post 2', votes: 25, comment: ['good']},
      { title: 'post 3', votes: 55, comment: ['Very Nice' ]},
      { title: 'post 4', votes: 15, comment: ['Very Nice' ]},
      { title: 'post 5', votes: 26, comment: ['Very Nice'] }
  ];

And the changes to the add comment function:

$scope.addComment = function(post){
   post.comment.push(post.newComment);
};

And heres a link to a working plnkr so you can see it in action!

edited Jan 22, 2016 at 18:56

answered Jan 22, 2016 at 18:35

RichG

3092 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Umer Javed Over a year ago

THank you soooo sooo much. Please explain a little bit more as im new to angularjs

RichG Over a year ago

So, the error you were running into can come from not defining a $scope variable and just trying to use it like $scope.comment, so instead I use the newComment key on the post object, which is previously defined and its a little cleaner than defining a completely new variable. So since the post object is getting passed into the addComment function then if you define the newComment inside there with an ng-model of a key on the post object you will already have everything you need right there with just one variable!

Umer Javed Over a year ago

I'm still having a problem. When I post similar comments it just not letting me add more comments then on that speicific post.

RichG Over a year ago

The issue is that theres no sort of tracking so duplicate entries will break your code! When you're ng-repeating you are going to want to track by $index most of the time to avoid broken code on duplicate entries! I updated the plnkr so you can see it in action again

Collectives™ on Stack Overflow

Undefined string when I pass it in the function in controller

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related