2016-12-24 103 views
0

我已經做了很多工作來解決這個問題,但它不起作用。我正在使用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 = ""; 
    }; 

然而,這不是工作,我不知道爲什麼。難道我做錯了什麼?如果是這樣,我該如何解決它?我已經看到很多有關這個問題的問題,但沒有答案爲我工作。我沒有看到控制檯中有任何錯誤...

我唯一看到的是,當我點擊它時,錨點獲得新類「激活」

+0

發佈您的控制器和整個視圖 – Sajeetharan

+0

您好。我已經爲你編輯了這個問題。 – Siyah

+0

爲什麼在'ion-view'中間有'ng-app'指令?我很驚訝沒有關於此的錯誤消息。 – georgeawg

回答

1

我沒有看到你的觀點的任何地方,你已經把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 = ""; 
}; 
+0

不,不工作。 – Siyah

+0

@Siyah支票更新了一個 – Sajeetharan

+0

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

1

在角度上,每個指令都會創建新的範圍。 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"/> 
+0

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

+0

@Siyah它應該work.check控制檯 –

+0

控制檯給我沒有錯誤。它不會清除它,它甚至打破我的搜索功能 – Siyah

1

嘗試了這一點: -

<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 = ""; 
    }; 
}); 
+0

也不工作的人: ( – Siyah

+0

看看這個http://jsfiddle.net/nzPJD/ – Codesingh

+0

它正在工作兄弟 – Codesingh

1

能否請你確保你把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";

+0

嗯,我沒有看到我的控制檯。我已經添加了searchController,但它不起作用。我不明白爲什麼。 – Siyah

0

我認爲你的控制器有問題。首先嚐試控制檯功能是否正常

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