使用AngularJS單擊清除文本輸入

Question

如何使用angularJS清除單擊按鈕上的文本輸入？

的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

如果你想清理整個表格，你可以使用這種方法。 這是你的模型到控制器：

$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 4

一個更容易和更短的方法是：

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

這一直爲我工作。

Answer 5

從Robert's答案的啓發，但是當我們使用，

在過濾ng-click="searchAll = null"，這使得該模型值null和在打開搜索不其正常功能工作，所以這將是更好足夠使用ng-click="searchAll = ''"代替

Answer 6

清除/重置單擊文本字段

最簡單的方法是清除/復位範圍

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

在控制器

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

Answer 7

在控制器

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

Answer 8

試試這個，

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