Question

如何使用angularJS点击按钮清除文本输入？

Search input

X是一个单独的链接，我想在其上触发一个函数。

HTML

<input type="text" class="form-control" data-ng-model="searchAll">
<a class="clear" data-ng-click="clearSearch()">X</a>

Answer 1

只需清除点击事件的范围模型值，它就可以为您完成。

<input type="text" ng-model="searchAll" />
<a class="clear" ng-click="searchAll = null">
    <span class="glyphicon glyphicon-remove"></span>
</a>

或者如果您保留控制器的$scope功能并从那里清除它。确保您已正确设置控制器。

$scope.clearSearch = function() {
    $scope.searchAll = null;
}

Answer 2

$scope.clearSearch = function () {
    $scope.searchAll = "";
};

http://jsfiddle.net/nzPJD/

JsFiddle如何在不使用内联JS的情况下完成它。

Answer 3

更简单，更简洁的方法是：

 <input type="text" class="form-control" data-ng-model="searchAll">
 <a class="clear" data-ng-click="searchAll = '' ">X</a>

这一直对我有用。

Answer 4

如果要清理整个表单，可以使用这种方法。这是你进入控制器的模型：

    $scope.registrationForm = {
    'firstName'     : '',
    'lastName'      : ''
};

您的HTML：

<form class="form-horizontal" name="registrForm" role="form">
   <input type="text" class="form-control"
                       name="firstName"
                       id="firstName"
                       ng-model="registrationForm.firstName"
                       placeholder="First name"
                       required> First name
   <input type="text" class="form-control"
                       name="lastName"
                       id="lastName"
                       ng-model="registrationForm.lastName"
                       placeholder="Last name"
                       required> Last name
</form>

然后，您应该通过以下方式克隆/保存您的清除状态：

$scope.originForm = angular.copy($scope.registrationForm);

您的重置功能将是：

$scope.resetForm = function(){
    $scope.registrationForm = angular.copy($scope.originForm); // Assign clear state to modified form 
    $scope.registrForm.$setPristine(); // this line will update status of your form, but will not clean your data, where `registrForm` - name of form.
};

通过这种方式，您可以清理整个表格

Answer 5

在点击时清除/重置文本字段的最简单方法是清除/重置范围

<input type="text" class="form-control" ng-model="searchAll" ng-click="clearfunction(this)"/>

在控制器中

$scope.clearfunction=function(event){
   event.searchAll=null;
}

Answer 6

受到Robert's回答的启发，但是当我们使用时，

过滤器中的

ng-click="searchAll = null"，它将模型值设为null，反过来搜索无法使用其正常功能，因此最好使用{{ 1}}而不是

Answer 7

在您的控制器中

$scope.clearSearch = function() {
     $scope.searchAll = '';
}

Answer 8

试试这个，

                     http_response_code(412);

使用AngularJS单击时输入明文

8 个答案: