First attempt with ionic fail a simple click


I have made a simple edit to the standard tab app: my purpose is to filter data of the list.
I have edit the original markup with this code

<div class="list list-inset">
            <label class="item item-input">
                <i class="icon ion-ios7-search placeholder-icon"></i>
                <input type="search" placeholder="Ricerca..." ng-model="searchQuery" />
                <i class="clear-search icon ion-ios7-close-empty" ng-click="clearSearch()"></i>

and in the list i have add the filter as

<ion-item ng-repeat="friend in friends | filter: searchQuery" type="item-text-wrap" href="#/tab/friend/{{}}">

In the controller i have add a simple function

   .controller('FriendsCtrl', function($scope, Friends) {
    $scope.friends = Friends.all();
    //for reset filter
    $scope.clearSearch = function() {
        $scope.searchQuery = '';

but if the filter work fine, the clearSearch function don’t work: i have added a console.debug(‘ok’)… but the event don’t fire

Please excuse my poor english … and the very newbie question
Thank you in advance


Could you turn it into a codepen? (try using one of the templates here)


This is the codePen

Thank you


I think this might be a problem with the icon being inside of the input. Check this out. I put an additional icon below the input which successfully clears searchQuery. I assume that inside the input the input itself and not the icon will receive the click event. Maybe you could try something like this.


Yeah I think it has to do with the inline button being covered by the list-inset input.

Here is a working (but ugly) example based off the collection-repeat example on Ionic’s Codepen repository:


I have edit the codepen for try with a simple search function

The filter don’t work: i think the error is in the line 6 of the js… the item parameter may be incorrect?

Thank you in advance