2

Having completed CodeSchool's AngularJS course, I'm trying to go back through and use what I've learned to build a simple to-do app. I've gotten it to the point where I can add entries to a list, but I'm not able to clear the text entry field after I've used the input. Here's my JSFiddle.

Specifically, here's my addComment() function:

card.addComment = function(newComment) {
  card.comments.push(newComment.text);
  newComment = {text: ""};
};

And the corresponding Angular HTML:

<form ng-submit="card.addComment(newComment)">
    <input name="comment" placeholder="Add comment" ng-model="newComment.text">
</form>

At first I was passing the data in as a string (<input ng-model="newComment"> instead of newComment.text), but then I remembered that strings get passed by value, not by reference. I figured newComment was being blanked in the function but not passed back through Angular to the document. But even after I changed newComment to an object so it would be passed by reference, it made no difference--clearing the value in JavaScript has no effect on the page. What am I doing wrong?

DawnPaladin
  • 1,426
  • 14
  • 26

3 Answers3

2

I remembered that strings get passed by value, not by reference.

This line of reasoning is incorrect. Everything in JavaScript gets passed by object reference. See this question: Is JavaScript a pass-by-reference or pass-by-value language?

Replacing the raw string with an object does potentially buy you some affordance, though. However, whether or not it's a string or an object (and indeed, a string is an object!), newComment = someValue will never work.

Instead, you'll need to set the text property on the object. This doesn't create a new object, it just modifies a property, so the reference is preserved. Try this instead:

newComment.text = '';
Community
  • 1
  • 1
Alexis King
  • 43,109
  • 15
  • 131
  • 205
1

Try this: 

card.addComment = function(newComment) {
  card.comments.push(newComment.text);
  newComment.text = "";
};

What you're doing is creating a new object on the scope and breaking the binding which was set up on the original object. By updating the text property only, you leave the binding intact and achieve your goal of clearing the input field to which it is bound.

net.uk.sweet
  • 12,444
  • 2
  • 24
  • 42
  • This problem occured OP has not followed the rule of prototypal inheritance properly http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs Declaring object again will create a new object for that property..prototypal inheritance gets failed in that case – Pankaj Parkar Sep 06 '15 at 21:53
  • better you add that in your answer..I tried to edit your answer couple of time...but in between you were editing it.. – Pankaj Parkar Sep 06 '15 at 21:56
  • @PankajParkar This question has nothing to do with prototypal inheritance and scopes, it has to do with pass-by-object-reference semantics in JavaScript. – Alexis King Sep 06 '15 at 22:23
  • I spend so long chasing this issue, I can't believe the solution was so simple. Thank you for the simple and clear explanation. – DawnPaladin Sep 06 '15 at 22:59
  • @AlexisKing I've bad understanding regarding it..Thanks for showing me right way. :) – Pankaj Parkar Sep 07 '15 at 07:10
0

You can rest a form which may do what you require

document.getElementById("myForm").reset();
Tim Street
  • 36
  • 5