[英]Clear text input on click with AngularJS
How can I clear a text input on click of a button using angularJS? 如何使用angularJS清除单击按钮时的文本输入?
The X is a seperate link, on which I would like to trigger a function. X是一个单独的链接,我想在其上触发一个函数。
HTML HTML
<input type="text" class="form-control" data-ng-model="searchAll">
<a class="clear" data-ng-click="clearSearch()">X</a>
Just clear the scope model value on click event and it should do the trick for you. 只需清除点击事件中的范围模型值,它应该为您完成。
<input type="text" ng-model="searchAll" />
<a class="clear" ng-click="searchAll = null">
<span class="glyphicon glyphicon-remove"></span>
</a>
Or if you keep your controller's $scope
function and clear it from there. 或者,如果您保留控制器的$scope
函数并从那里清除它。 Make sure you've set your controller correctly. 确保已正确设置控制器。
$scope.clearSearch = function() {
$scope.searchAll = null;
}
$scope.clearSearch = function () {
$scope.searchAll = "";
};
http://jsfiddle.net/nzPJD/ http://jsfiddle.net/nzPJD/
JsFiddle of how you could do it without using inline JS. JsFiddle如何在不使用内联JS的情况下完成它。
An easier and shorter way is: 更简单,更简单的方法是:
<input type="text" class="form-control" data-ng-model="searchAll">
<a class="clear" data-ng-click="searchAll = '' ">X</a>
This has always worked for me. 这一直对我有用。
If you want to clean up the whole form, you can use such approach. 如果要清理整个表单,可以使用这种方法。 This is your model into controller: 这是你的控制器模型:
$scope.registrationForm = {
'firstName' : '',
'lastName' : ''
};
Your HTML: 你的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>
Then, you should clone/save your clear state by: 然后,您应该克隆/保存您的清除状态:
$scope.originForm = angular.copy($scope.registrationForm);
Your reset function will be: 您的重置功能将是:
$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.
};
In such way you are able to clean up the whole your form 通过这种方式,您可以清理整个表单
Easiest way to clear/reset the text field on click is to clear/reset the scope 单击时清除/重置文本字段的最简单方法是清除/重置范围
<input type="text" class="form-control" ng-model="searchAll" ng-click="clearfunction(this)"/>
In Controller 在控制器中
$scope.clearfunction=function(event){
event.searchAll=null;
}
Inspired from Robert's answer, but when we use, 灵感来自罗伯特的回答,但是当我们使用时,
ng-click="searchAll = null"
in the filter, it makes the model values as null
and in-turn the search doesn't work with its normal functionality, so it would be better enough to use ng-click="searchAll = ''"
instead 过滤器中的ng-click="searchAll = null"
,它使模型值为null
,反过来搜索不能与其正常功能一起使用,因此使用ng-click="searchAll = ''"
而不是
In Your Controller 在您的控制器中
$scope.clearSearch = function() {
$scope.searchAll = '';
}
Try this, 试试这个,
this.searchAll = element(by.xpath('path here'));
this.searchAll.sendKeys('');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.