单击时无法清除Angular中的输入字段

Question

I am stuck and I have no clue what I am doing wrong here. So this is the HTML I am using:

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

And this is the output HTML when I have typed / typing something into my input field:

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

So what does this say? It says that it automatically puts the classname ng-not-empty and ng-not-empty when it's respectively being not empty and being empty (not filled in).

Whenever I click on the button I've made, it doesn't do a thing. I have no errors in my console, but as I said: whenever I write something into my input field, I can't reset it / remove it with this button.

Any idea what I am doing wrong or what might be going wrong?

PS: I already tried every possible solution in this SO post .

Answer 1

I've got something from Angular Documentation.

It's realted to a button, but I don't think this is a problem.

Check this out: Clear Model

The next example shows how to debounce model changes. Model will be updated only 1 sec after last change. If the Clear button is pressed, any debounced action is canceled and the value becomes empty.

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

Not the debounce, but the $rollbackViewValue() to specific field in your form. And after user.name=''

Please, try and tell us.

In your code:

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

You try:

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

Answer 2

Okay, so I have fixed this problem and I still don't know why or what is causing it, but the fix is like this:

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

As you can see, I have put the anchor with the ng-click outside of the label element and now, suddenly, it works. Unbelievable.

Thanks for the help guys!

Answer 3

I have created snippet on jsfiddle with your code and all work fine: ngModel is cleared and class ng-not-empty removed when you click on X. So looks like the problem not in this piece of code

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