How to clear input field in AngularJs?

Question

When a user types anything in the input field and clicks the add button, the input is added into the array and gets displayed in the list.

However I am not able to clear the input field after pushing it into the array.

I am new to AngularJs, and would appreciate some help. Thanks in advance.

Here is my Code:

<div class="container">
<div ng-controller="mainController">
<input type="text" ng-model='name' placeholder="name">
<input type="text" ng-model='number' placeholder="number">
<button ng-click="addToList()">Add</button>
<ul ng-repeat="person in array_of_Names">
     <li>{{$index + 1}}.Name:{{person.name}},Phone:{{person.number}}</li>
</ul>
</div>
</div>

And my app.js:

 var myApp = angular.module('myApp', []);
 myApp.controller('mainController',['$scope',function($scope){
 $scope.array_of_Names = [];
 $scope.addToList = function(){
    var person = {
        name: $scope.name,
        number: $scope.number
    };
    $scope.array_of_Names.push(person);
 };

}]);

$scope.name = null?

Felippe Duarte
– Felippe Duarte

2016-11-24 19:08:09 +00:00
Commented Nov 24, 2016 at 19:08 — Felippe Duarte
– Felippe Duarte, Commented Nov 24, 2016 at 19:08

Paul Bursu · Accepted Answer · 2016-11-24 19:15:48Z

4

You can set

$scope.number = ""
$scope.name = ""

and that will change it in the HTML as well.

Your code will look like this:

 var myApp = angular.module('myApp', []);
 myApp.controller('mainController',['$scope',function($scope){
 $scope.array_of_Names = [];
 $scope.addToList = function(){
    var person = {
        name: $scope.name,
        number: $scope.number
    };
    $scope.name = "";
    $scope.number = "";
    $scope.array_of_Names.push(person);
 };

}]);

answered Nov 24, 2016 at 19:15

Paul Bursu

1015 bronze badges

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

1 Comment

Hari Over a year ago

Thanks For Help, It's Working.

Sahbaz · Accepted Answer · 2016-11-24 21:48:59Z

0

 $scope.addToList = function(){
    var person = {
        name: $scope.name,
        number: $scope.number
    };
    $scope.array_of_Names.push(person);
    $scope.name = null;
    $scope.number = null;
 };

That should do the job, just modify your addToList function to be like this.

answered Nov 24, 2016 at 21:48

Sahbaz

1,2724 gold badges19 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to clear input field in AngularJs?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related