How to clear input fields in Angularjs after click of a button

Question

I need to clear a textbox and a select-list after a button is clicked.This is what I tried but it doesn't seems to work:

HTML:

    <input type="text" ng-model="Model.CurrentDowntimeEvent.Comment" size="60" placeholder="ENTER IN ANY ADDITIONAL INFORMATION"/><br>
     <select class="categories" ng-disabled="selectlistdisabled"  ng-model="Model.CurrentDowntimeEvent.CategoryId" ng-options="downtimeCategory.CategoryId as downtimeCategory.CategoryName for downtimeCategory in Model.DowntimeCategories">     
   </select>
 <button ng-click="StopCurrentDowntime()">Stop Downtime Event</button>

JS:

    angular.module('myApp', [])

     .controller('DowntimeController', function ($scope, $http) {
         $scope.Model = new Model($http);

     $scope.StopCurrentDowntime = function () {
             $scope.CurrentDowntimeEvent.Comment = '';
             $scope.CurrentDowntimeEvent.CategoryId = '';
}
});

stackoverflow.com/questions/15305764/…

Can
– Can

2014-07-18 11:25:02 +00:00
Commented Jul 18, 2014 at 11:25 — Can
– Can, Commented Jul 18, 2014 at 11:25
@Can Sahin Bakir I saw that link but it doesn't work for me

user3811714
– user3811714

2014-07-18 11:27:36 +00:00
Commented Jul 18, 2014 at 11:27 — user3811714
– user3811714, Commented Jul 18, 2014 at 11:27

Aswin Prabakaran · Accepted Answer · 2016-08-10 05:18:56Z

3

Instead of using button to clear input fields you can use reset (input type="reset") inside the form

answered Aug 10, 2016 at 5:18

Aswin Prabakaran

254 bronze badges

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

Comments

maurycy · Accepted Answer · 2014-07-18 11:29:31Z

1

You are missing Model. in your JS

angular.module('myApp', []).controller('DowntimeController', function ($scope, $http) {
   $scope.Model = new Model($http);

   $scope.StopCurrentDowntime = function () {
     $scope.Model.CurrentDowntimeEvent.Comment = '';
     $scope.Model.CurrentDowntimeEvent.CategoryId = '';
  }
});

answered Jul 18, 2014 at 11:29

maurycy

8,4201 gold badge30 silver badges44 bronze badges

5 Comments

Caio Cunha Over a year ago

Or simply $scope.Model = new Model($http); depending on what Model is. You could also use $injector.instantiate instead of creating the Model by and, and let Angular take care of injection.

maurycy Over a year ago

True, I just assumed that OP don't want to destroy existing model, I'll add your suggestion to my answer if you don't mind

user3811714 Over a year ago

@maurycy thanks a lot hey,I didn't realize that I had to put Model as well

Raghavendra Over a year ago

@CaioToOn I didnot understand this, can you please explain Why we use new Model?

Caio Cunha Over a year ago

If you don't need to reuse the same instance, you can simply create a new one and expose in the scope. By doing that, and considering it will bring an empty object, it would clear the fields in the same way. Does it make sense?

Collectives™ on Stack Overflow

How to clear input fields in Angularjs after click of a button

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related