如何清除AngularJs中的輸入字段？

Question

當用戶在輸入字段中鍵入任何內容並單擊添加按鈕時，輸入將添加到數組中並顯示在列表中。

但是我不能清除輸入字段後推入陣列。

我是AngularJs的新手，希望能有所幫助。 在此先感謝。

這裏是我的代碼：

<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> 

而且我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); 
}; 

}]); 

Answer 1

您可以設置

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

，這將在HTML改變它。

您的代碼將是這樣的：

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); 
}; 

}]); 

Answer 2

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

這應該做的工作，只是修改addToList功能是這樣。