如何清除输入字段onclick？

我已经做了很多工作来解决这个问题，但它不起作用。我正在使用Ionic的搜索栏。没有填充任何内容时，我的输入字段将获得类ng-empty（所以这是默认状态）。输入字段填充时会得到一个ng-not-empty类。如何清除输入字段onclick？

所以，我可以用jQuery或其他方法解决此问题，但我看到Angular有办法做到这一点。这是HTML：

<ion-view view-title="Testing"> 

    <ion-header-bar align-title="center" class="bar"> 
     </ion-header-bar> 

     <ion-content class="scrollBar"> 

      <ion-searchbar class="searchBar" ng-app="myApp"> 
       <label> 
       <input class="searchField" type="search" ng-model="itemsSearch"/> 
        <a class="clear" data-ng-click="saveParentComment()">X</a> 
        <i class="icon ion-search placeholder-icon"></i> 
       </label> 
      </ion-searchbar> 

     </ion-content> 
    </ion-view>

我已经添加到了我的控制器：

myApp.controller('SearchController', function ($http, $scope, $state) { 

$scope.saveParentComment = function() { 
     $scope.itemsSearch = ""; 
    };

然而，这不是工作，我不知道为什么。难道我做错了什么？如果是这样，我该如何解决它？我已经看到很多有关这个问题的问题，但没有答案为我工作。我没有看到控制台中有任何错误...

我唯一看到的是，当我点击它时，锚点获得新类“激活”。

来源

2016-12-24 Siyah

发布您的控制器和整个视图 – Sajeetharan

您好。我已经为你编辑了这个问题。 – Siyah

为什么在'ion-view'中间有'ng-app'指令？我很惊讶没有关于此的错误消息。 – georgeawg

我没有看到你的观点的任何地方，你已经把SearchController还NG-模型应该有dot操作

尝试工作，

<ion-view view-title="Testing" ng-app="myApp" ng-controller="SearchController"> 
    <ion-header-bar align-title="center" class="bar"> 
     </ion-header-bar> 
     <ion-content class="scrollBar"> 
      <ion-searchbar class="searchBar"> 
       <label> 
       <input class="searchField" type="search" ng-model="myObj.itemsSearch"/> 
        <a class="clear" data-ng-click="saveParentComment()">X</a> 
        <i class="icon ion-search placeholder-icon"></i> 
       </label> 
      </ion-searchbar> 
     </ion-content> 
    </ion-view>

在控制器：

myApp.controller('SearchController', function ($http, $scope, $state) { 
$scope.myObj = {}; 
$scope.saveParentComment = function() { 
     $scope.myObj.itemsSearch = ""; 
};

来源

2016-12-24 17:07:02 Sajeetharan

不，不工作。 – Siyah

@Siyah支票更新了一个 – Sajeetharan

也不管用。对象似乎打破了我的搜索功能 – Siyah

在角度上，每个指令都会创建新的范围。 itemsSearch绑定到指令作用域，对控制器不可见。

将它用作控制器中$scope上定义的对象的一部分。

myApp.controller('SearchController', function ($http, $scope, $state) { 

    $scope.objItem = {itemsSearch : ""}; 

    $scope.saveParentComment = function() { 
      $scope.objItem.itemsSearch = ""; 
     };

HTML：

<input class="searchField" type="search" ng-model="objItem.itemsSearch"/>

来源

2016-12-24 17:08:09

也不行。谢谢你的努力。 – Siyah

@Siyah它应该work.check控制台 –

控制台给我没有错误。它不会清除它，它甚至打破我的搜索功能 – Siyah

尝试了这一点： -

<input type="text" class="form-control" data-ng-model="searchAll"></input> 
     <a class="clear" href="" data-ng-click="clearSearch()">X</a> 

app.controller("SearchController", function ($scope) { 
    $scope.searchAll = ""; 

    $scope.clearSearch = function() { 
     $scope.searchAll = ""; 
    }; 
});

来源

2016-12-24 17:11:11 Codesingh

也不工作的人：（ – Siyah

看看这个http://jsfiddle.net/nzPJD/ – Codesingh

它正在工作兄弟 – Codesingh

能否请你确保你把SearchController，能否请您与此

<ion-view view-title="Testing" ng-app="myApp" ng-controller="SearchController"> 
<ion-header-bar align-title="center" class="bar"> 
    </ion-header-bar> 
    <ion-content class="scrollBar"> 
     <ion-searchbar class="searchBar"> 
      <label> 
      <input class="searchField" type="search" ng-model="itemsSearch"/> 
       <a class="clear" data-ng-click="saveParentComment()">X</a> 
       <i class="icon ion-search placeholder-icon"></i> 
      </label> 
     </ion-searchbar> 
    </ion-content>

尝试

及功能：

$scope.saveParentComment = function() { 
    console.log("clear"); 
    $scope.itemsSearch = null; 
};

如果你看到清晰的控制台日志比你确信你的函数工作正常。你也可以在控制器中设置初始值，比如itemSearch。 $scope.itemsSearch = "Search Here";

来源

2016-12-24 17:15:08

嗯，我没有看到我的控制台。我已经添加了searchController，但它不起作用。我不明白为什么。 – Siyah

我认为你的控制器有问题。首先尝试控制台功能是否正常

$scope.saveParentComment = function() { 
      console.log("working"); 
     };

来源

2016-12-24 17:38:35

如何清除输入字段onclick？

回答

相关问题