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

我从Angular Documentation获得了一些东西。

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

检查出来：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>

不是debounce，而是$ rollbackViewValue（）到表单中的特定字段。在user.name =＆＃39;＆＃39;

之后

请尝试告诉我们。

在您的代码中：

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

好的，所以我已经解决了这个问题，我仍然不知道为什么或导致它的原因，但修复方法是这样的：

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

我已使用您的代码在jsfiddle上创建了代码段并且所有工作正常：单击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>

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

3 个答案: