Form ng-submit="search()" inside ion-content doesn't work

ionic-v1
1

Hi all.

I’m tring to place a form inside a tag in this way:

<ion-content>
    <div>
        <form ng-submit="search()">
            <div class="item item-input-inset">
                <label class="item-input-wrapper" id="search-input">
                    <i class="icon ion-search placeholder-icon"></i>
                    <input type="text" placeholder="Cerca" ng-model="searchKey">
                </label>
            </div>
        </form>
    </div>
    <ion-list>...</ion-list>
   </ion-content>

but I’ve noticed that when I submit the form the value of searchKey is empty.
If I place the form behind the it works (like we see in the codepen http://codepen.io/ionic/pen/CrInw ), but I dont’ want to have a search input behind the header, I would like to hide it if the user scrolls the list.

Someone have suggestions?

I’m using beta.1 (but it won’t work also in previous releases).

Stefano

2

I’m not sure what you mena by “If I place the form behind…”, can you setup a CodePen sample of YOUR code?

It is possibly an issue with “dot notation”.

Can you try changing ng-model="searchKey" to ng-model="data.searchKey" and in your controller initializing it like:

$scope.data = { "searchKey" : '' }
3

Hi.

I don’t have the time right now to post a CodePen sample, but I can show you how the form works and how it doesn’t.

Working code:

 <ion-view>
       <form ng-submit="search()">
            <div class="item item-input-inset">
                <label class="item-input-wrapper" id="search-input">
                    <i class="icon ion-search placeholder-icon"></i>
                    <input type="text" placeholder="Cerca" ng-model="searchKey">
                </label>
            </div>
        </form>
    <ion-content>
    <ion-list>...</ion-list>
   </ion-content>
</ion-view>

Code that doen’t work:

<ion-view>
    <ion-content>
        <form ng-submit="search()">
            <div class="item item-input-inset">
                <label class="item-input-wrapper" id="search-input">
                    <i class="icon ion-search placeholder-icon"></i>
                    <input type="text" placeholder="Cerca" ng-model="searchKey">
                </label>
            </div>
        </form>
    <ion-list>...</ion-list>
   </ion-content>
</ion-view>

As you can see, the form is the same, but in the second example is inside the tag.
In the working example instead is above the tag.

This is my controller code:

     $scope.searchKey = "";


    $scope.search = function () {
        findAllResources({"search": $scope.searchKey});
    };
4

I’ve solved forcing the ng-controller inside the tag:

<ion-view>
    <ion-content ng-controller="ResourceIndexCtrl">
        <form ng-submit="search()">
            <div class="item item-input-inset">
                <label class="item-input-wrapper" id="search-input">
                    <i class="icon ion-search placeholder-icon"></i>
                    <input type="text" placeholder="Cerca" ng-model="searchKey">
                </label>
            </div>
        </form>
    <ion-list>...</ion-list>
   </ion-content>
</ion-view>