How to clear input field onclick? - angularjs

Question

I have done a lot to fix this, but it's not working. I am using Ionic's searchbar.
My input field gets the class ng-empty when nothing is filled in (so this is the default state). The input field gets a ng-not-empty class when it's filled in.
So, I could fix this with jQuery or something, but I saw that Angular has ways to do this. This is the 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>
I've added this to my controller:
myApp.controller('SearchController', function ($http, $scope, $state) {
$scope.saveParentComment = function () {
$scope.itemsSearch = "";
};
Yet, this is not working and I don't get why. Am I doing something wrong? If so, how can I fix it? I have seen a lot of questions regarding this one, but no answer worked for me. I don't see any errors in the console either...
The only thing I see, is that the anchor gets a new class "activated" when I click on it.

Answer 1

In the angular,every directive create new scope.
itemsSearch is bind to the directive scope and its not visible to controller.
Use it as part of object defined on $scope in controller.
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"/>

Answer 2

Try this out :-
<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 = "";
};
});

Answer 3

I don't see anywhere in your view you have put SearchController Also ng-model should work with a dot operator
Try,
<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>
In controller:
myApp.controller('SearchController', function ($http, $scope, $state) {
$scope.myObj = {};
$scope.saveParentComment = function () {
$scope.myObj.itemsSearch = "";
};

Answer 4

Can you please make sure that you put SearchController,
Can you please try with this
<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>
And Function:
$scope.saveParentComment = function () {
console.log("clear");
$scope.itemsSearch = null;
};
If you see clear in console log than you are sure that your function is working fine. And you can set initial value also in controller like for itemSearch like.
$scope.itemsSearch = "Search Here";

Answer 5

I think there is a problem with your controller. First try in console for function is working or not
$scope.saveParentComment = function () {
console.log("working");
};