入力フィールドをクリックでクリアできません

Question

私は立ち往生しており、私はここで間違っているのか分かりません。だから、これは私が使用していますHTMLです：

<ion-searchbar class="searchBar"> 
    <label> 
    <input class="searchField" type="search" placeholder="Search" ng-model="findAndSearch" /> 
    <a class="clear" ng-click="findAndSearch = '' ">X</a> 
    <i class="icon ion-search placeholder-icon"></i> 
    </label> 
</ion-searchbar> 

をそして、私は私の入力フィールドに何かを入力/入力したとき、これはHTML 出力されます。

<ion-searchbar class="searchBar"> 
    <label> 
    <input class="searchField ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" type="search" placeholder="Search" ng-model="findAndSearch" /> 
    <a class="clear" ng-click="findAndSearch = '' ">X</a> 
    <i class="icon ion-search placeholder-icon"></i> 
    </label> 
</ion-searchbar> 

だから、これは何と言っていますか？空ではなく、空（空でない）のときは、自動的にクラス名ng-not-emptyとng-not-emptyが置かれます。

私が作ったボタンをクリックするたびに、何もしません。私はコンソールにエラーはありませんが、私が言ったように：私は自分の入力フィールドに何かを書くたびに、私はそれをリセットすることはできません/このボタンで削除します。

私が間違っていることや何が間違っている可能性がありますか？

PS：私はすでにthis SO postのすべての解決策を試しました。

Answer 1

わかりましたので、私はこの問題を修正していると私はまだ、なぜか、それを引き起こしているものを知っているが、修正はありませんこのようなものです：あなたが見ることができるように

<ion-searchbar class="searchBar"> 
     <label> 
     <input class="searchField" type="search" placeholder="Search" ng-model="findAndSearch" /> 
     <i class="icon ion-search placeholder-icon"></i> 
     </label> 
     <a class="clear" ng-click="findAndSearch = '' ">X</a> 

    </ion-searchbar> 

、私はアンカーを入れているng-clickはlabel要素の外にあり、今は突然動作します。信じられない。

助けてくれてありがとう！

Answer 2

私はあなたのコードでjsfiddleにスニペットを作成して、すべてが正常に動作： ngModelがクリアされ、あなたがX上でクリックしたときに削除クラスNG- - 空ではないが、だから、コードのこの部分では問題ないように見えます

<div ng-app="app"> 
<ion-searchbar class="searchBar"> 
    <label> 
    <input class="searchField" type="search" placeholder="Search" ng-model="findAndSearch" /> 
    <a class="clear" ng-click="findAndSearch = '' ">X</a> 
    <i class="icon ion-search placeholder-icon"></i> 
    </label> 
</ion-searchbar> 
</div> 

Answer 3

私はAngular Documentationから何かを得ました。

ボタンに変わっていますが、これは問題ではないと思います。

はこれをチェックしてください：Clear Model

を次の例では、モデルの変更をデバウンスする方法を示しています。モデルは最後に変更されてからわずか1秒後に更新される になります。 Clearボタンを押すと、 のデバウンスされたアクションはキャンセルされ、値は空になります。デバウンスが、あなたのフォーム内の特定のフィールドに$ rollbackViewValue（）

<div ng-controller="ExampleController"> 
    <form name="userForm"> 
    Name: 
    <input type="text" name="userName" 
      ng-model="user.name" 
      ng-model-options="{ debounce: 1000 }" /> 
    <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br /> 
    </form> 
    <pre>user.name = <span ng-bind="user.name"></span></pre> 
</div> 

ありません。 and user.name = ''の後

ご連絡ください。あなたのコードで

：

<a class="clear" ng-click="findAndSearch = '' ">X</a> 

あなたが試してみてください。

<a class="clear" ng-click="yourForm.(give some ID to your input).$rollbackViewValue(); findAndSearch = ''">X</a>