使用 AngularJS 单击时清除文本输入

Posted 2023-02-22

【中文标题】使用 AngularJS 单击时清除文本输入

【英文标题】：Clear text input on click with AngularJS

【发布时间】：2014-03-09 15:25:22

【问题描述】：

如何使用 angularJS 在单击按钮时清除文本输入？

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

html

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

【问题讨论】：

请添加您输入的HTML。

【参考方案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;

【讨论】：

谢谢，这可行，但前提是代码是内联的，而不是在单独的 JS 文件中。你能告诉我如何让它在一个单独的 JS 文件中工作吗？

查看我的编辑。但是为什么要添加不需要的额外代码呢？

之前我使用的是 $scope.searchAll = ""; 好吧，它也能正常工作，，，还有其他一些情况正在发生...总的来说感谢您的建议 null 也可以。

【参考方案2】：

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

http://jsfiddle.net/nzPJD/

如何在不使用内联 JS 的情况下做到这一点的 JsFiddle。

【参考方案3】：

一种更简单、更短的方法是：

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

这一直对我有用。

【讨论】：

当我们点击“X”时，“searchAll”的模型值将变为空，因为我们在点击“X”时已经为该模型分配了空字符串。 !!data-ng-click="searchAll = ' ' "!!.这样做的好处是我们不必只为一行代码创建和调用单独的函数。

【参考方案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.
;

这样你就可以清理整个表单

【讨论】：

我确实实现了您的解决方案并为我工作，我确实收到了警告：TypeError: Cannot read property '$setPristine' of undefined at Scope.$scope.resetForm 我可以修复这个警告吗？

【参考方案5】：

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

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

在控制器中

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

【参考方案6】：

灵感来自Robert's的回答，但是当我们使用时，

ng-click="searchAll = null" 在过滤器中，它将模型值设为null，反过来搜索无法使用其正常功能，因此使用ng-click="searchAll = ''" 会更好

【讨论】：

您能谈谈使用这种方法时对 XSS 的影响吗？

【参考方案7】：

在您的控制器中

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

【参考方案8】：

试试这个，

 this.searchAll = element(by.xpath('path here'));
 this.searchAll.sendKeys('');