The google maps is displayed when the page is loaded.
But when the ion-segment is toggled , the maps is not displayed.
Below is my ionic 2 code:
<ion-header>
<ion-toolbar no-border-top>
<ion-segment [(ngModel)]="social" (ionChange)="segementChangeAction()">
<ion-segment-button value="activity">
Map
</ion-segment-button>
<ion-segment-button value="messages">
Messages
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content no-bounce>
<div [ngSwitch]="social">
<div *ngSwitchCase="'activity'">
<div #map id="map"></div>
</div>
<div *ngSwitchCase="'messages'">
Some text.....
</div>
</div>
</ion-content>
That's because ngSwitchCase removes the map's div from the DOM when ion-segment is toggled. Do this:
<div [ngSwitch]="social">
<div [style.display]="social === 'activity' ? 'block' : 'none'">
<div #map id="map"></div>
</div>
<div *ngSwitchCase="'messages'">
Some text.....
</div>
</div>
In order to make it work in Ionic 3 the accepted answer i´ve to make a little adjustment adding height: 100% to the container:
<div [ngSwitch]="social">
<div [style.display]="social === 'activity' ? 'block' : 'none'" style="height: 100%">
<div #map id="map"></div>
</div>
<div *ngSwitchCase="'messages'">
Some text.....
</div>
Related
Im trying to hide specific div (empty state) when i add some item from add button, any ideas how can i do that easily?
Best Regards, Will.
page.html
<ion-content>
<!-- DIV ABOVE -->
<div class="center-div">
<img src="assets/imgs/noItem.svg" />
<div class="center">
<h1>Empty List</h1>
</div>
</div>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<ion-list>
<button *ngFor="let item of items" ion-item (click)="goToItemDetail(crop)">
...
</ion-list>
<ion-fab right bottom>
<button ion-fab class="button-fab" (click)="addItem()">
<ion-icon name="add"></ion-icon>
</button>
</ion-fab>
</ion-content>
Yes, you can hide div with the help of *ngIf="condition"
<div class="center" *ngIf="items">
<h1>Empty List</h1>
</div>
or you can also check boolean varible on button like
// isVisible: boolean
addItem() {
this.isVisible = false;
}
<div class="center" *ngIf="!isVisible">
<h1>Empty List</h1>
</div>
I am new to ionic and angular JS. I am trying a simple app in ionic framework. I am trying to inject html template in ion-view tag with the help of ngRoute concept. But my code is not injected html template in ion-view. Also based on injected page, title bar title also be changed automatically. Also i want to show popover icon with menu item in title bar. How can i achieve this. Find the below index.html, home.html and app.js files. Thanks in advance.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar title="{{message}}" class="bar-positive">
<button class="button button-icon ion-more" ng-click="popover.show($event)">
</button>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
<script id="mypopover.html" type="text/ng-template">
<ion-popover-view >
<ion-content class="my-popover">
<div class="list">
<a class="item" nav-transition="android" href="#aboutus">
About Us
</a>
<a nav-transition="none" class="item" href="http://ionicframework.com/docs/" target="_blank">
Documentation
</a>
<a class="item" href="http://showcase.ionicframework.com/" target="_blank">
Showcase
</a>
<a class="item" href="http://ionicframework.com/submit-issue/" target="_blank">
Submit an Issue
</a>
<a class="item" href="https://github.com/driftyco/ionic" target="_blank">
Github Repo
</a>
</div>
</ion-content>
</ion-popover-view>
</script>
</body>
</html>
templates/home.html
<script type="text/ng-template" id="home.html">
<ion-view title="Movie Review">
<ion-content>
<div class="fixed-header my-video">
<ion-slide-box show-pager="false" auto-play="false" does-continue="true">
<ion-slide>
<img style="max-width:100%" src="img/irumuganmovie.png"/>
</ion-slide>
<ion-slide>
<img style="max-width:100%" src="img/irumuganmovie.png"/>
</ion-slide>
<ion-slide>
<img style="max-width:100%" src="img/irumuganmovie.png"/>
</ion-slide>
<ion-slide>
<img style="max-width:100%" src="img/irumuganmovie.png"/>
</ion-slide>
<ion-slide>
<img style="max-width:100%" src="img/irumuganmovie.png"/>
</ion-slide>
</ion-slide-box>
</div>
<div class="ion-content-below-my-video">
<div class="row center grid-row-height">
<div class="col width-50 grid-col-size">
<ion-card>
<img src="img/irumuganmovie.png"/>
<ion-card-content>
<ion-card-title>
Nine Inch Nails Live
</ion-card-title>
</ion-card-content>
</ion-card>
</div>
<div class="col width-50 grid-col-size">
<ion-card>
<img src="img/irumuganmovie.png"/>
<ion-card-content>
<ion-card-title>
Nine Inch Nails Live
</ion-card-title>
</ion-card-content>
</ion-card>
</div>
</div>
<div class="row center grid-row-height">
<div class="col width-50 grid-col-size">
<ion-card>
<img src="img/irumuganmovie.png"/>
<ion-card-content>
<ion-card-title>
Nine Inch Nails Live
</ion-card-title>
</ion-card-content>
</ion-card>
</div>
<div class="col width-50 grid-col-size">
<ion-card>
<img src="img/irumuganmovie.png"/>
<ion-card-content>
<ion-card-title>
Nine Inch Nails Live
</ion-card-title>
</ion-card-content>
</ion-card>
</div>
</div>
</div>
</ion-content>
</ion-view>
</script>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app=angular.module('starter', ['ionic','ngRoute']);
app.controller('AppCtrl',function($scope,$ionicPopover)
{
$ionicPopover.fromTemplateUrl('mypopover.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
alert("opened");
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
// Perform Action on destroy
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// Perform action on hide popover
$scope.$on('popover.hidden', function() {
// Perform action
});
// Perform action on remove popover
$scope.$on('popover.removed', function() {
// Perform action
});
});
app.config(function($routeProvider){
$routeProvider
.when('/',{
url: '/home',
templateUrl : "templates/home.html",
controller : "homeCtrl"
});
});
app.controller('homeCtrl',function($scope) {
// body...
$scope.message="home controller";
});
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
after having same problem and searching for an answer i found this:
you can add <ion-nav-title> right after <ion-view>.
Example:
`<ion-view>
<ion-nav-title>
<span style="color: blue">hello</span>world
</ion-nav-title>
....
....
</ion-view>`
hope it will help someone.... :)
I want to make a grid of categories images, select multiple categories from them and send their values to controller. I don't know how to achieve this with ionic framework.
Here is my view:
<ion-view cache-view="false">
<div class="bar login-bar bar-header bar-stable">
<h1 class="title ttl-log-bar">Welcome</h1>
</div>
<div class="bar bar-subheader welcome-subhead">
<h2 class="title welc-sub-h2">What do you like to shop for?</h2>
<h5 class="title welc-sub-h5">Pick at least one category</h5>
</div>
<ion-content scroll="true" class="has-header has-subheader">
<div class="row row-cat" style="flex-wrap: wrap;">
<div class="col col-cat col-50" ng-repeat="items in categoryList">
<img ng-src="{{items.image}}" width="100%" />
</div>
</div>
</ion-content>
</ion-view>
Add on img tag ng-click with function passing e.g. ID like this:
<img ng-src="{{items.image}}" ng-click="selectCategory(items.id)" />
Then in controller define this function
$scope.selectedCategory = [];
$scope.selectCategory = function(id){
var index = $scope.selectedCategory.indexOf(id);
if(index === -1){
$scope.selectedCategory.push(id);
}else{
$scope.selectedCategory.splice(index, 1);
}
}
Then you can us selectedCategory array as a collection of selected item's IDs
I am trying to get page containing a slider in the middle and a button in the bottom as shown in this picture:
So, I chose to use the Ionic grid since I thought it will be fast to do it. I wrote thee following code:
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable bar-positive">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content scroll="false">
<div class="row row-center">
<ion-slide-box on-slide-changed="slideHasChanged($index)" class="col col-80 col-offset-10">
<ion-slide>...</ion-slide>
<ion-slide>...</ion-slide>
<ion-slide>...</ion-slide>
</ion-slide-box>
</div>
<div class="row row-bottom">
<button class="button button-full button-positive button-large button-skip">Click</button>
</div>
</ion-content>
</ion-pane>
Unfortunately, I got this result:
How can I fix it to get the view in the first picture ?
I have been trying making ion-tabs fixed inside ion-content but it hardly seems posssible. So is there any way of making tabs fixed inside a scollable content in ionic?
$( "ion-content" ).scroll(function() {
var scrollWidth = $(".main-content").height()-$(".header-bar").height();
if (parseInt($(this).scrollTop()) > scrollWidth ) {
$("#fixedAboutTabs").addClass("fixed");
});
}
else {
$("#fixedAboutTabs").removeClass("fixed");
});
.fixed{
left: 0;
top:44px;
position: fixed;
z-index:100;
width: 100%;
}
<ion-view>
<div class="header-bar">
<button class="button button-clear arrow-btn" ng-click="goBack()"> <img src="img/arrow.png" class="arrow-img"> </button>
<h1 class="title">{{product.productName}}</h1>
</div>
<ion-content on-scroll="onScroll()" overflow-scroll="true" has-bouncing="false">
<div class="main-content">
<img src="img/video.png" class="video-img">
<div class="product-info">
//some content here
</div> <!--product info closes -->
</div> <!--main content closes-->
<div id="staticAboutTabs" class="demo-tabs">
<ul>
//customized tabs (want to make this tabs fixed bewlow header-bar)
</ul>
</div>
</ion-content>
</ion-view>
Instead of ion-tabs i have used my own customized tabs. let me know if the ion-tabs or any custom made tabs can be fixed inside scrollable ion-content
Try this by placing the to-be-fixed content inside <div slot="fixed"> </div>
<ion-content>
<div slot="fixed">
<ion-tabs #tabs tabsPlacement="top">
<ion-tab-bar slot="top" tabsHighlight="true">
<ion-tab-button tab="tab1">
<ion-label>Tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Tab2</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</div>
</ion-content>