Question

我在<form>中有一个用作搜索输入的文字输入。

在此文本输入的右侧，如果输入为空，我有一个搜索图标，如果输入中有文本，我有一个十字图标。

<form action="javascript:void(0)" method="get" class="sidebar-form">
   <div class="input-group">
      <input type="text" ng-model="searchInput" id="sInput" class="form-control" 
             placeholder="{{isEnglish ? 'Search...' : 'Recherche...'}}" 
             ng-change="filterCartoList(searchInput)">

      <span class="input-group-btn">
         <button type='submit' name='search' id='search-btn' class="btn btn-flat">
            <span ng-if="searchInput.length == 0">
               <i class="fa fa-search"></i>
            </span>
            <span ng-if="searchInput.length > 0" ng-click="clearSearch(); filterCartoList('');">
               <i class="fa fa-times"></i>
            </span>
         </button>
   </div>
</form>

每当我点击十字图标时，我希望我的输入被清除。

所以我使用clearSearch()函数：

$scope.clearSearch = function () {
    $scope.searchInput = '';
};

重置搜索。但是输入文本仍然包含文本。

当我使用searchInput显示console.log($scope.searchInput)时，它是一个空字符串。但不知何故，在我看来，文本输入仍然具有相同的值。

此外，如果我在页面的某处显示searchInput，则在点击十字图标后也不会更改，即使搜索已重置并且控制台显示{{1}的空字符串也是如此}}

所以我想，我正在展示副本等等。

还知道如何清除我的输入吗？

修改：我还尝试了searchInput document.getElementById("sInput").innerHTML = "";功能和同样的问题。

Answer 1

实际上有一个javascript函数会为您解决这个问题：

document.getElementById("myForm").reset();

因此，如果你将它添加到你的函数中（或者在onclick中使用，我知道它不再是好形式但在某些情况下仍然有效）。

$scope.clearSearch = function () {
    document.getElementById("myForm").reset();
};

这与您尝试清除所有输入时的效果相同。

ng-model输入未在视图中更新

1 个答案: