Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 228595

How to scroll to particular input field when state change from one page to another page using ionic framework

$
0
0

After a long RND, I found the following solution for the problem

Here i give you the example for the solution.

in HTML:

first we have to give delegate-handle to ion-content of the page

   <div id="field2_area" class="item-input item-stacked-label">
                <span class="input-label">Name</span>
                <input type="text" placeholder="Enter Name"/>
   </div>

   <div id="field1_area" class="item-input item-stacked-label item-button-right">
                <span class="input-label">Account</span>
                <input type="text" placeholder="Select Account"/>
                <div class="buttons lookup-btns">
                    <button class="button"  ng-click="selectAcc()">
                        <i class="icon ion-ios-search-strong"></i>
                    </button>
                    <button class="button" ng-click="addAcc()">
                        <i class="icon ion-android-add"></i>
                    </button>
                </div>
     </div>


In app.js:

in the main code we have to handle back button event of the mobile and check current screen state and according to that we pass delegate handle of the page to our common scrollTo_Field function

.controller('MainCtrl', function ($scope, $rootScope,$ionicPlatform,$ionicPosition,$ionicScrollDelegate) {

$ionicPlatform.registerBackButtonAction(function (event) {
if ($state.current.name == "login") {
    navigator.app.exitApp();
}else if($state.current.name == "app.page1"){
    $rootScope.scrollTo_Field('field1_area','page1Content');
   navigator.app.backHistory();
}else if($state.current.name == "app.page2"){
    $rootScope.scrollTo_Field('field2_area','page2Content');
    navigator.app.backHistory();
}else{
}

}, 100);

$rootScope.scrollTo_Field = function (eleArea,pageContent) {
$timeout(function() {
    var elePos = $ionicPosition.position(angular.element(document.getElementById(eleArea)));
    if(pageContent == "page1Content"){
       $rootScope.page1_scrollView.scrollTo(elePos.left, elePos.top, true);
    }else if(pageContent == "page2Content"){
      $rootScope.page2_scrollView.scrollTo(elePos.left, elePos.top, true);
   }
}, 200);
}

})

The above code is work for me.


Viewing all articles
Browse latest Browse all 228595

Trending Articles