Tag Archives: Ionic Tutorials

Hide back button in ionic AngularJs


Hide back button in ionic AngularJs : Sometimes we need to hide the back button on some pages. We can use $ionicNavBarDelegate service and showBackButton() function to show and hide the back button.


Hide back button in ionic AngularJs

You disable the back button in ionic as below –

Hide back button in ionic AngularJs Example

.controller('MainCtrl', function($scope, $location, $ionicNavBarDelegate) {
   var path = $location.path();
   if (path.indexOf('edit') != -1){
     $ionicNavBarDelegate.showBackButton(false);
	 }
   else{
     $ionicNavBarDelegate.showBackButton(true);
	 }
})

The above example will hide the back button where the page index of ‘edit’ is not equal to -1 ie it will hide the back button except the edit page. So you can add other condition to show and hide the back button.

  • $ionicNavBarDelegate.showBackButton(false) – This will hide the back button.
  • $ionicNavBarDelegate.showBackButton(false) – This will show the back button.

Reload Ionic View


Reload Ionic View : In ionic views are cached to provide the good performance to the users. Sometimes we need to reload the views. Here in this tutorial we are going to explain how you can reload the views in ionic framework.


Reload Ionic View

You can avoid the view cache using the followings ways –

The above method will help you in disabling view cache and reloading it for updated content.

Ionic Change Background Color of List Item


Ionic Change Background Color of List Item : We sometimes need to customize the ionic list item’s style such as background color, text color etc. You can add your own css to add the new style or you can override the default style. Here in this tutorial we are going to explain how to add styles in ionic list items with example and demo.


Ionic Change Background Color of List Item

You can add the background color of list Item using the following methods –

Ionic Change Background Color : Using Default Colors

Ionic Change Background Color of List Item:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Try it »

If you run the above example it will produce the following output-

ionic-change-background-color-of-list-item

Ionic Change list item Background Color : Using Custom Styles

If you want to add your own custom style rather than using the default background colors you can create custom class and add the background color. Here is an example –

Ionic Change Background Color of List Item: Example

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Try it »

Ionic List Change Background Color on Hover

Ionic Change Background Color on Hover Example:


  • Item 1
  • Item 2
  • Item 3
  • Item 4

Try it »


More Examples

Let us have more examples to customize the ionic lists-


Ionic Change font Color

If you want to add your own custom style rather than using the default background colors you can create custom class and add the background color. Here is an example –

Ionic Change font Color of List Item: Example

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Try it »

The above example will change the font color of the list items in the ionic.

Ionic Side Menus


Ionic Side Menus (Delegate $ionicSideMenuDelegate): Ionic Side Menus are basically container which contains the main content and slide menu(s). You can add the menu in left or side. $ionicSideMenuDelegate service is used for menus. Here in this tutorial we are going to explain how to create slide menus with example and demo.


Ionic Side Menus

Side menus contains following components –

  • ion-side-menus
  • ion-side-menu-content
  • ion-side-menu
  • expose-aside-when
  • menu-toggle
  • menu-close
  • $ionicSideMenuDelegate

Let us create a simple left menu and then we will go through each components. First we will import the service $ionicSideMenuDelegate in controller to use the menus functions. Let us first create js part and them the html part this simple menu.

Ionic Slide Menu : Controller Js Part

Ionic Slide Menus: Example


In controller part we have imported the service $ionicScrollDelegate and created a function toggleLeft which binds the toggle event to the menus.

Ionic Slide Menu : Html Part

Now let us create the html part contains the simple menu and body part as below –

Ionic Slide Menus: Example





    
    

www.tutorialsplane.com

Main Content

Dummy Content...

Try it »

ion-side-menus contains the menu and main content both. ion-side-menu-content contains the main content of the application. ion-header-bar creates header part. Header has the button with “burger icon” and the attribute directive menu-toggle=”left” which binds the menu toggle left functionality.

Tip : If you want to add the toggle right instead of left toggle add menu-toggle=”right” instead of menu-toggle=”right” and change the controller toggle function as $ionicSideMenuDelegate.toggleRight().

If you run the above example it will produce the following output –

Ionic Slide Menus toggle close open Example


Learn More About Ionic Menus

Let us learn in details about ionic menus.


ion-side-menus

To create side menu parent element <ion-side-menus> is required. It has at least two child elements –
– 1 . <ion-side-menu> – It contains the side menus.
– 2 . <ion-side-menu-content> – It is used for main content which is positioned at the center.

Here is structure for <ion-side-menus> and it’s elements-

ion-side-menus: Ionic Side Menu Bar Toggle Example


  
  
  
  
  
  
  
  
  

  
  
  


You can create left or right menu using the above ion-side-menu.

Options

  • enable-menu-with-back-views[boolean (optional)] – It is basically used to decide whether to enable the side menu when the back button is showing. If you set it false the side menu
    toggle will be hidden and user will not be able to use it. It will be visible when user will go to home page ie root page.
  • delegate-handle[string(optional)]– $ionicScrollDelegate is used to indentify the side menus.

ion-side-menu-content

This is child of ion-side-menus. This main content part of the application which displays the main content to users.

ion-side-menu-content: Ionic Side Menu Bar

  
  
  

My Home Page

Main Para Starts here..

Options

  • drag-content[boolean(optional)]: Used to set content dragging enabled or disabled. Default is set true.
  • edge-drag-threshold[number(optional)]: Used to set the threshold distance to ie. distance from the top of the screen in pixel.

ion-side-menu

This is child of ion-side-menus and sibling of ion-side-menu-content directive. This is main side menu part.

ion-side-menu : Ionic Side Menu Bar Example

  
  
     
  

This contains the menu items of the side menu.

Options

  • side[string] : Used to assign Left or Right Side.
  • is-enabled(optional): Used to enable or disable the menu.
  • width[optinal]: Width of side menu in pixel. Default is 275px.

expose-aside-when

This is used to show and hide side menu landscape and portrait mode. You can set expose-aside-when=”large” to hide the menu. It hides the menu when viewport width is less than 786px and always shows when viewport width is more than the 786px.

expose-aside-when : Ionic Side bar show in portrait mode Example

  
  
     
  

Ionic Infinite Scroll


Ionic Infinite Scroll – ionInfiniteScroll directive allows you to call a function when user reaches at the bottom of the page. The ionInfiniteScroll is basically child of ionContent or ionScroll. on-infinite is used to call the function on scroll event when user reaches at the bootom of the page. Here in this tutorial we are going to explain how to call the function on on-infinite on infinite scroll.

Ionic Infinite Scroll

Here is very basic and simple example of ionInfiniteScroll

Ionic Infinite Scroll : Html Part

Ionic Infinite Scroll:


  
  
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • {{item}}

Let us create javascript part with controller and function to call the function when user scrolls on the bootm of the screen.

Ionic Infinite Scroll : Controller Part

The controller part contains the following function to load the data from server-

Ionic Infinite Scroll Controller Example

.controller('MainCtrl', function($scope, $http) { 
$scope.items = [];
$scope.loadMoreData = function() {
$http.get('url_to_load content').then(function(resp) {
     $scope.items = resp.item;// json format replace with your data format returned from server
     $scope.$broadcast('scroll.infiniteScrollComplete');
     
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });
  };
});  

Try it »

The above example loads data from server when you scroll to the bottom of the screen. The above example will produce the output something like this –

ionic infinite scroll example

Options

  • on-infinite [expression] – Used to call when the scroller reaches at the bottom of screen.
  • distance [optional(string)]– The distance from bottom when the function shoud be called Default distance is 1%.
  • spinner [optional(string)] – The ionSpinner to show when loading.
  • icon [optional(string)] – This is used to specify the icon to show while loading.
  • immediate-check [optional(boolean)] – This is used to check the infinite scroll bounds immediately on load.

Ionic Scroll


Ionic Scroll : This is used to create scrollable container for content. is used to create scollable area in ionic. Here in this tutorial we are going to explain how to create ionic scroll area with example and demo.


Ionic Scroll

Here is simple example of ionic scroll –

Ionic Scroll:


  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 8
  • Item 9

Try it »

The above example will produce the output something like this –

ionic scroll example

API

delegate-handle [optional(string)]– Used to identify this scrollView with $ionicScrollDelegate.

direction [optional(string)]– Direction of scroll. ‘x’ or ‘y’ or ‘xy’. Default is ‘y’.

locking [optional(boolean)] – Used to lock screen in one direction. This is useful to set to false when zoomed in or scrolling in two directions. Default value is set true.

paging [optional(boolean)]– If you want to scroll with paging.

on-refresh [optional(expression)]– Called when pull-to-refresh.

on-scroll [optional(expression)]– Called when user scrolls.

scrollbar-x [optional(boolean)]– Used to show the horizontal scrollbar. Default value is true.

scrollbar-y [optional(boolean)]– Used to show the vertical scrollbar. Default value true.

zooming [optional(boolean)]– Used to support pinch-to-zoom

min-zoom [optional(integer)]– Used to set the smallest zoom allowed. The default value is 0.5.

max-zoom [optional(integer)]– Used to set the largest zoom allowed. The default value is 3.

has-bouncing [optional(integer)]– Used to allow scrolling to bounce past the edges of the content. This is set true in ios and false in android.

AngularJS ng-click to go to another page in Ionic framework


AngularJS ng-click to go to another page in Ionic framework : We sometimes need ng-click to load another page in ionic framework. Here in this tutorial we are going to create a simple function which will accept the path of the page and will load the page. For this we need the controller service $location. In this this tutorial we will exlplain this with example and online demo.


AngularJS ng-click to go to another page in Ionic framework

You can create the controller function simply as –

Controller part : Js

AngularJS ng-click to go to another page in Ionic framework:

 
    
   
     

   

Try it »

If you will run the above example it will produce the output like this -

AngularJS ng-click to go to another page in Ionic framework

Ionic run a controller function on view open/shown


Ionic run a controller function on view open/shown : We sometimes need to call a controller when the view is loded or open/shown. You can load the controller on the ion-nav-view load and it’s function. Here in this tutorial we are going to explain how to load and call a different controller function whenever the view is loaded ie. open/shown.


Ionic run a controller function on view open/shown

Here are the steps to run a controller function on ion view open-

ion-nav-view Part

Add the controller name you want to load and call it’s function as below

Ionic run a controller function on view open/shown:




Now let us define the controller and it’s function as below-

Controller Part

Ionic run a controller function on view open/shown:

.controller('myController', function($scope) {
  $scope.testFunction = function() {    
	 //Your Code Goes Here
  };
  
});

The above controller will be loaded and function testFunction will be called.

Note : Cache may cause issue sometimes so if you face this problem clear cache each time it is loaded or each time before closing the view.

Ionic clear view cache on close : afterLeave –

Ionic clear view cache on close : afterLeave –

$scope.$on("$ionicView.afterLeave", function () {
     $ionicHistory.clearCache();
}); 

The above example will clear ionic view cache each time it is closed.

Ionic change ion-view header color


Ionic change ion-view header color : Sometimes you need to change the default ion-view header color in ionic framework. You can use ion-nav-bar in each view and add the ionic inbuilt color css or add you custom css to change the ion-view header color. Here in this tutorial we are going to explain how to change the ion-view color in ionic framework with example and demo.


Ionic change ion-view header color

Add the ion-nav-bar to each ion-view and add the color css in this. Here is an example for this –

Ionic change ion-view header color:


  
    
  
  
    Dummy Content..
  

Try it »

The above example will change the default ion-view header color.

If you will run the above example it will produce the following output-

Ionic change ion-view header color css

More About

Let us do more customization.

Add Custom Color

If you want to add your custom color add a class and add the css for this –

Ionic change ion-view header color: Add custom color


  
    
  
  
    Dummy Content..
  


Try it »

The above example will change the default ion-view header color.

If you will run the above example it will produce the following output-

Ionic change ion-view header color