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

只需清除点击事件的范围模型值,它应该为你做的伎俩。

 <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; } 
 $scope.clearSearch = function () { $scope.searchAll = ""; }; 

http://jsfiddle.net/nzPJD/

JsFiddle你怎么能做到这一点,而不使用内联JS。

更简单和更短的方法是:

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

这一直为我工作。

如果你想清理整个表格,你可以使用这种方法。 这是你进入控制器的模型:

  $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. }; 

通过这种方式,您可以清理整个表单

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

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

在控制器中

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

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

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

在你的控制器

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