We Keep Coding

How to hide panel and navbar in login page framework7

I'd like to hide correctly the panel and the navbar only in the login page. After login I'd like to show them. I achieve this task partially, because my code has a bad side effect. When I open the app I saw my login page but for few second the navbar appears and then disappears. I'd like to access on login page without this effect. I'd like to see immediatly the login page without them.
How can I solve it?
I declared them in my index.html
<div id="app">
<div class="panel panel-left panel-cover">
<div class="navbar color-theme-green ">
<div class="navbar-inner sliding">
<div class="title">Menu</div>
</div>
</div>
<div class="block">
<div class="list links-list">
<ul>
<li>
<a href="/home/" class="panel-close">
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">graph_square</i>
<i class="material-icons md-only">dashboard</i>
</div>
<div class="item-inner">
<div class="item-title">Home</div>
</div>
</div>
</a>
</li>
<li id="company" style="display:none;">
<a href="/company/" class="panel-close" >
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">home</i>
<i class="material-icons md-only">home</i>
</div>
<div class="item-inner">
<div class="item-title">Company</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Top Navbar -->
<div class="navbar color-theme-green">
<div class="navbar-inner sliding">
<div class="left">
<a class="link panel-open">
<i class="f7-icons ios-only">menu</i>
<i class="material-icons md-only">menu</i>
<!--<span class="ios-only">Back</span>-->
</a>
<a class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">My app</div>
</div>
</div>
<div class="view view-main"></div>
This is my config file app.js where I show and hide the elements on pageInitEvent
var $$ = Dom7;
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'myApp',
// App id
id: 'it.myapp.myApp',
theme: 'auto',
version: '0.0.1',
cacheDuration: 0,
cache: false,
stackPages: true,
preloadPreviousPage: true,
panel: {
swipe: 'right',
swipeNoFollow: true
},
/**
* Routes
*/
routes: [
{
name: 'home',
path: '/home/',
url: './pages/home.html',
on: {
pageInit: function(e, page) {
app.navbar.show('.navbar');
page.router.clearPreviousHistory();
}
},
},
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageInit: function(){
app.navbar.hide('.navbar');
}
},
}
}
And finally this is my login.html page where I put no-navbar in orderd to hide it.
<div data-name="login" class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content ">
<!-- Login form -->
<form id="form-login">
<div class="row justify-content-center">
<div class="col-100 tablet-80 desktop-50">
<div class="card head-card-forest">
<div class="card-header">
<span></span><h2>Login</h2><span></span>
</div>
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Email</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Username">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Password">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
<div class="row">
<a class="col button button-fill" id="button-login" onclick="getLogin()"> Accedi </a>
</div>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--.card-->
</div><!--.col-->
</div><!--.row-->
</form>
</div> <!-- ./ page-content -->

Best thing is hide navbar before init or while its mounted
You can try these two
1:Beforeinit
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageBeforeIn: function(){
app.navbar.hide('.navbar');
}
},
}
2:When its injected to DOM an
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageMounted: function(){
app.navbar.hide('.navbar');
}
},
}
pageInit will be triggered once required components and navbar is loaded

you can hide the panel in the login page using pageInit event
pageInit : function (e,p) { p.app.panel.left.hide() }

How to include different view in the same html page with framework7?

I'm a beginner with framework 7. I'm developing a little app and I split the html code in different files because i have a lot of pages with div in common. My problem is: I have a page.html, inside my page.html I'd like to include different div in the same windows from different html files.
for example in php we can do it with a
include("");
but in framework7 I can include only one with
<div class="view view-main view-init" data-url="/page/" data-name="page"></div>
I'd like to include more one view like this
<div class="view view-main view-init" data-url="/page1/" data-name="page1"></div>
<div class="view view-main view-init" data-url="/page2/" data-name="page2"></div>
i put an image here to explain me better.
what i'd like to do
Thank you for your help.
pages.html
<div data-name="pages" class="page">
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
<div class="col-100 tablet-100 desktop-80">
<div class="block">
<form class="list" id="pages1">
<div class="row justify-content-center">
<div class="block-title">
<h1> Pages</h1>
</div> <!--block-title-->
</div><!--row-->
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card 1</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->
Here I'd like to include the code inside pages1.html
Here I'd like to include the code inside pages2.html
</form>
</div><!--block-->
<div class="block">
<a class="col button button-fill" href="#">Salva</a>
</div>
</div><!--col-100-->
</div><!--row-->
</div> <!-- ./ page-content-->
pages1.html
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card2</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->

To include Multiple Views Layout you need to do this:
You need to create wrapper with class views like this: <div class="views tabs">
You need to create div view like this: <div class="view view-main tab tab-active" id="view-1">.related page..</div><div class="view tab" id="view-2">.related page..</div>
You need to make sure thats only one views class wrapper.
In Js: You can control multiple views by this:
var view1 = app.views.create('#view-1', {...});
var view2 = app.views.create('#view-2', {...});
For more details: F7 View
For Embedded Multi view not like tab:
Example
Note: for each view in F7 is got 100% height...you need to make sure thats height is equal 100% finally

EDIT: After a long investigation, I found from the documentation that you can do it like this:
<!-- in your views page, just add these parameter to your view you want to inherit -->
<div class="view view-init" data-url="/your-page/" data-name="home" data-push-state="true">
...
</div>
And in your routers, will need to define your route as well:
var app = new Framework7({
root: '#app',
// Create routes for all pages
routes: [
{
path: '/',
url: 'index.html',
},{
// Add your contents page route
path: '/your-page/',
url: 'pages/your-page.html',
},
.....
});
Hope this help.

How to parse and use a json object passed from parent page?

I apologize in advance if this has already been answered. I've Googled around for a few hours now, and I still haven't found anything that seems to answer my exact question.
Here is my code:
<ion-content>
<div class="list">
<div style="padding: 0px; margin: 0px;" class="item">
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
{{x.order_id}}
</div>
<div class="col left">
<a ng-href="#/tab/orderdetails?detail={{x.detail}}">订单详情</a>
</div>
</div>
</div>
</div>
</ion-content>
x.detail is the json object i want to pass to the newly opened page "orderdetails.html":
<script id="templates/orderdetails.html" type="text/ng-template">
<ion-view view-title="OrderDetails">
<ion-content class="padding">
<p>Here I want to display order details...</p>
var obj = this.href.split('?')[1];
console.log(obj);
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
</p>
</ion-content>
</ion-view>
</script>
app.js:
.state('tabs.orderdetails', {
url: "/orderdetails",
views: {
'home-tab': {
templateUrl: "templates/orderdetails.html"
}
}
})
I want to know how to parse and use the passed object in "orderdetails.html". Thanks.

You can just pass the data as state params like this below.
<ion-content>
<div class="list">
<div style="padding: 0px; margin: 0px;" class="item">
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
{{x.order_id}}
</div> <div class="col left">
<a ng-href="#/tab/orderdetails/{{x.detail}}">订单详情</a>
</div>
</div>
</div>
</div>
</ion-content>
and recieve it in state params like this below.
.state('tabs.orderdetails', {
url: "/orderdetails/:whateverdata",
views: {
'home-tab': {
templateUrl: "templates/orderdetails.html"
}
}
})
you will get the data in your controller for orderdetails tab as $stateParams.whateverdata

How to hide a div with angular js ng-hide

I have a page with a div which contains a jumbotron, this is the first page that is display anytime the site is accessed. On this page I have some links which link to different pages using the '$routeProvide'/angular. I want to hide the jumbotron from the other links/pages but I am not sure how to do that.
main page :
<body ng-app="single-page-app">
<div ng-controller="cfgController">
<div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header col-md-12 col-sm-12 logo">
<img src="img/gilgal.png" class="img-responsive center-block" alt="Responsive image">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="container-fluid col-md-9 col-sm-12 hidden-xs col-md-offset-2">
<ul class="nav navbar-nav" id="navbar">
<li class="navlink">About Us</li>
<li class="navlink">Advisory Service</li>
<li class="navlink">Investment Service</li>
<li class="navlink">Infrastructure Development</li>
<li class="navlink">Contact</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="jumbotron" ng-hide="hideme">
<div class="container-fluid">
<div class="row jumb">
<div class="col-md-4 col-md-offset-1 head-card">
<h4 class="head-text">ADVISORY SERVICES</h4>
<p class="head-desc">We provide Corporate Finance Advisory Services for private and public institutions in Sub-Saharan Africa</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 head-card">
<h4 class="head-text">INVESTMENT MANAGEMENT SERVICES</h4>
<p class="head-desc">We focus on Real Estate and Infrastructural Projects in Sub-Saharan Africa</p>
</div>
</div>
</div>
</div>
<div ng-view>
</div>
<div class="container-fluid col-md-12 foot">
<p class="col-md-offset-1">All content copyright of Gilgal Capital Limited 2015 | Branding and Website by Ashebby</p>
</div>
<!-- Angular Route.js -->
<script src="js/angular-route.min.js"></script>
<!-- Angular.js -->
<script src="js/angular.min.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</div>
</body>
here is my script.js
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/index',{
templateUrl: 'index.html'
})
.when('/about',{
templateUrl: 'about.html'
})
.when('/advService',{
templateUrl: 'advService.html'
})
.when('/imService',{
templateUrl: 'imService.html'
})
.when('/greService',{
templateUrl: 'greService.html'
})
.when('/contact',{
templateUrl: 'contact.html'
});
});
app.controller('cfgController'['$Scope', function($scope) {
$Scope.hideme = false;
$Scope.$on('$locationChangeStart', function(event) {
$scope.hideme = true;
});
}]);
here is a typical link to a different page about.html :
<div class="container-fluid col-md-12 about-us">
<div class="about-us col-md-offset-1">
<h2 class="col-md-10">
<span class="title2">About Us</span>
<div class="line"></div>
</h2>
<p class="col-md-10 article">text</p>
</div>
</div>

Is that really hard... So ng-hide is easy to use
To hide a div just do this :
<div ng-hide="hideme">your content </div>
and in your controller you define hideme variable like this :
$scope.hideme = true; // true to hide ,false to show
Edit: So in your case do this :
<li class="navlink"><a ng-click="hideIt()" href="#/about">About Us</a></li>
In your controler make a fucntion hideIt to hide the jumbotron div :
$scope.hideIt = function(){
$scope.hideme = true;
}

app.run(['$rootScope', function($rootScope) {
$rootScope.hideme = false;
$rootScope.$on('$routeChangeStart', function(){
$rootScope.hideme = true;
});
Along with your code, just add this run block. It should work.

Angular: how to loop through JSON in controller and display in view

I am learning a Angular and I'm stuck with one task. I have three parts in my app a View, service and controller,
View look like this:
<body ng-app="ForecastApp">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<p class="navbar-brand">Week Forecast</p>
</div>
</nav>
<div class="container-fluid" class="main" ng-controller="MainController">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<h2><span class="label label-info">Search for a City</span></h2>
<div class="input-group">
<input type="text" class="form-control" placeholder="City name...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">{{ fiveDay.city.name }}</h1>
<div class="forecast" ng-repeat="day in fiveDay.days">
</div>
</div>
</div>
</div>
</div>
</body>
The service look like this:
app.factory('forecast', ['$http', function($http) {
return $http.get('http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
And the controller look like this:
app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
forecast.success(function(data) {
$scope.fiveDay = data;
});
}]);
Data for this lesson is take from the rest api from here http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo
How can I go throw all this json resposne and display all the items from the array "list" from this json, for example to look like this:
Date: "2015-06-12 15:00:00"
description: "few clouds"
temp: 26.82
pressure: 1015.2

As I see its simple JSON you can traverse through it using . & whenever required mention index of it to get the value.
Code
$scope.fiveDays = data.list
Markup
<div class="forecast" ng-repeat="day in fiveDays ">
<div>Date : {{dt|date: 'yyyy-dd-MM'}}</div>
<div>description: {{weather[0].description}}</div>
<div>temp: {{main.temp}}</div>
<div>pressure: {{main.pressure}}</div>
</div>
Different angular date filter format