javascript - ng-model 输入未在 View 中更新

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在我页面的某处，单击十字图标后它也不会改变，即使搜索已重置并且控制台显示 searchInput 的空字符串。 .

所以我想，我正在显示副本或其他东西。

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

编辑:我也尝试过document.getElementById("sInput").innerHTML = "";对于clearSearch()功能和相同的问题。

Answer 1

实际上有一个 JavaScript 函数可以为您处理这个问题:

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

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

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

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