使用AngularJS单击清除文本input

如何使用angularJS清除单击button上的文本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); 

您的重置function将是：

 $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

启发了罗伯特的答案，但是当我们使用，

在filter中， ng-click="searchAll = null" ，它使模型值为null并反过来search不能正常工作，所以它会更好，使用ng-click="searchAll = ''"而不是

Answer 7

在你的控制器

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