【问题标题】:How to clear input field in AngularJs?如何清除AngularJs中的输入字段?
【发布时间】:2017-04-09 03:45:03
【问题描述】:

当用户在输入字段中键入任何内容并单击添加按钮时,输入将添加到数组中并显示在列表中。

但是,在将输入字段推入数组后,我无法清除它。

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

}]);

【问题讨论】:

  • $scope.name = null?

标签: angularjs


【解决方案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);
 };

}]);

【讨论】:

  • 感谢您的帮助,它正在工作。
【解决方案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 函数修改为这样。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-17
    • 1970-01-01
    • 2013-11-28
    • 1970-01-01
    • 2021-09-27
    • 2016-07-20
    相关资源
    最近更新 更多