Angular JS - Text box not getting updated after clearing

Question

I am a beginner in Angular JS. While creating a sample application I have encountered the below problem of a text box not getting set once the value in its cleared using JavaScript.Below is my code:-

<!DOCTYPE html>
 <html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script>
     var app = angular.module("myApp", []);

     app.controller("myCtrl", function () {

        this.showName = function () {
            this.user = { name: "John" };
        }

        this.clear = function () {

            document.getElementById("name").value = "";

        }
    });
</script>
</head>
<body ng-app="myApp">
 <div ng-controller="myCtrl as ctrl" class="container">

    <input type="button" ng-click="ctrl.showName()" value="Show Name"/>
    <input type="text" id="name" ng-model="ctrl.user.name" />
    <input type="button" value="Clear" ng-click="ctrl.clear()" />

 </div>
</body>

Her the first time I click on the Show name button I am getting the name in the text box.But if I clear the text box by clicking the Clear button and then click on the show button again the name is not getting filled in the text box. Can anyone please tell me why this is happening and anyways to fix this?

Here is my code in plunkr - http://plnkr.co/edit/MXlH2o?p=preview

Mohit Saxena · Accepted Answer · 2016-06-08 10:45:22Z

2

In your clear function do below code to clear value.

this.user = { name: "" };

answered Jun 8, 2016 at 10:45

Mohit Saxena

1,4471 gold badge12 silver badges21 bronze badges

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

2 Comments

Vishnu Over a year ago

Thanks Mohit. This works but can you please tell the reason why my code was not working?

Mohit Saxena Over a year ago

Yes, actually in Angular when you clear any field by getting that element, in that case ng-model is blocked and then two way binding does not work that's why It was not working.

DilumN · Accepted Answer · 2016-06-08 10:46:06Z

1

Clear the name like this,

this.clear = function () {
                this.user.name = "";
            }

answered Jun 8, 2016 at 10:46

DilumN

2,8956 gold badges33 silver badges45 bronze badges

Comments

Karim · Accepted Answer · 2016-06-08 10:50:26Z

1

you don't need a clear() method in the controller, just take advantage of the double binding in angular, set the username to an empty string when you click on the button and the view will be updated consequently.

<input type="button" value="Clear" ng-click="ctrl.user.name = ''" />

answered Jun 8, 2016 at 10:50

Karim

8,6823 gold badges27 silver badges36 bronze badges

2 Comments

Vishnu Over a year ago

Thanks Karim. But can you please tell the reason why my above code is not working?

Karim Over a year ago

Well, I just don't think it's the right way to use angular. With angular you should not manipulate dom in this way to avoid messing with the native javascript but use the tools provided. cheers

Behnam · Accepted Answer · 2016-06-08 11:07:36Z

1

change clear function to this code

this.clear = function () {
     this.user.name="";
}

answered Jun 8, 2016 at 11:07

Behnam

6,5191 gold badge44 silver badges37 bronze badges

1 Comment

Ahmad Baktash Hayeri Over a year ago

@Bamnaam, can you also tell OP the reason he needs to do so? Answers in Stackoverflow are meant to be quite clear and descriptive. So keep that in mind.

Collectives™ on Stack Overflow

Angular JS - Text box not getting updated after clearing

4 Answers 4

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related