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

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

我从 Angular 文档中得到了一些东西。

这是一个按钮，但我认为这不是问题。

看看这个：Clear Model

下一个示例展示了如何去抖动模型更改。模型将是 上次更改后仅 1 秒更新。如果按下清除按钮， 任何去抖动的动作都被取消，值变为空。

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

不是去抖动，而是表单中特定字段的 $rollbackViewValue()。 在 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>

Answer 3

我已经使用您的代码在jsfiddle 创建了 sn-p，并且一切正常： 当您单击 X 时，ngModel 被清除，并且 ng-not-empty 类被删除。所以看起来问题不在这段代码中

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