web-dev-qa-db-ja.com

AngularJSでクリック時にクリアテキスト入力

AngularJSを使用してボタンをクリックすると、テキスト入力をクリアするにはどうすればよいですか？

Search input

Xは個別のリンクであり、その上で関数をトリガーします。

HTML

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

クリックイベントでスコープモデルの値をクリアするだけで、うまくいくはずです。

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

http://jsfiddle.net/nzPJD/

インラインJSを使用せずにそれを行う方法のJsFiddle。

15
Kasper Lewau

より簡単で短い方法は次のとおりです。

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

これはいつも私にとってはうまくいきました。

10
Shivek Parmar

フォーム全体をクリーンアップする場合は、そのようなアプローチを使用できます。これはコントローラーへのモデルです：

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

このようにして、フォーム全体をクリーンアップできます

8
Vladyslav Babenko

クリック時にテキストフィールドをクリア/リセットする最も簡単な方法は、スコープをクリア/リセットすることです

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

コントローラー内

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

Robert's answerから着想を得ていますが、使用する場合、

フィルターのng-click="searchAll = null"は、モデル値をnullとして作成し、通常の機能では検索が順番に機能しないため、代わりにng-click="searchAll = ''"を使用する方が適切です

1
San Krish

これを試して、

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

コントローラー内

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