What can be displayed in content displayed in the ion navigation display displayed in the sidebar?
So, I'm still a bit in the copy-paste-pray phase, learning some of what goes on in this framework. But I cannot see what I can or cannot do in the view that my side menu is in.
Here's a whole page. Any suggestions? I am using Firefox, opening a window to be roughly iPhone shaped and loading index.html.
I don't want to use old fashioned table tags. On the other hand, I don't see what will work. I want sane HTML styling HTML. But the view can't even show the html table?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AAA</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- These next two make the app start slow, but this will work until we decide on how to bundle. -rrk -->
<link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>
<script type="text/javascript">
angular.module('aaa', ['ionic'])
.factory('Calculators', function() {
return {
all: function() {
return [
{ title: "MENU1" },
{ title: "MENU2" },
{ title: "MENU3" },
{ title: "MENU4" },
{ title: "MENU5" },
{ title: "MENU6" },
{ title: "MENU7" }
];
},
getLastActiveIndex: function() {
return parseInt(window.localStorage['lastActiveCalculator']) || 0;
},
setLastActiveIndex: function(index) {
window.localStorage['lastActiveCalculator'] = index;
}
}
})
.config(function($stateProvider, $urlRouterProvider) {
"use strict";
/* Set up the states for the application different sections. */
$stateProvider
.state('MENU1', {name: 'about', url: '/about', templateUrl: 'about.html', controller: 'CalculatorCtrl'})
.state('MENU2', {name: 'page2', url: '/page2', templateUrl: 'page2.html', controller: 'CalculatorCtrl'})
.state('MENU3', {name: 'page3', url: '/page3', templateUrl: 'page3.html', controller: 'CalculatorCtrl'})
.state('MENU4', {name: 'page4', url: '/page3', templateUrl: 'page4.html', controller: 'CalculatorCtrl'})
.state('MENU5', {name: 'page5', url: '/page3', templateUrl: 'page5.html', controller: 'CalculatorCtrl'})
.state('MENU6', {name: 'page6', url: '/page3', templateUrl: 'page6.html', controller: 'CalculatorCtrl'})
.state('MENU7', {name: 'page7', url: '/page3', templateUrl: 'page7.html', controller: 'CalculatorCtrl'})
;
$urlRouterProvider.otherwise('/about');
})
.controller('CalculatorCtrl', function($scope, Calculators, $state, $ionicSideMenuDelegate) {
// Load or initialize calculators
$scope.calculators = Calculators.all();
Calculators.setLastActiveIndex(0);
// Grab the last active, or the first calculator
$scope.activeCalculator = $scope.calculators[Calculators.getLastActiveIndex()];
// Called to select the given calculator
$scope.selectCalculator = function(calculator, index) {
$scope.activeCalculator = calculator;
Calculators.setLastActiveIndex(index);
$state.transitionTo(calculator.title);
$ionicSideMenuDelegate.toggleLeft(false);
};
$scope.toggleCalculators = function() {
$ionicSideMenuDelegate.toggleLeft();
};
});
</script>
</head>
<body ng-app="aaa" ng-controller="CalculatorCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button" ng-click="toggleCalculators()">
<i>Calc</i>
</button>
<h1 class="title">AAA</h1>
</ion-header-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
Text0
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="calculator in calculators"
ng-click="selectCalculator(calculator, $index)"
ng-class="{active: activeCalculator == calculator}">
{{calculator.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script id="about.html" type="text/ng-template">
<ion-view title="About">
<ion-content padding="true">
<form>
<table border="1">
<tr>
<td><input type="button" value="Save/Load" /></td>
<td><input type="button" value="Share" /></td>
<td><input type="button" value="Help" /></td></tr>
<tr><td colspan="3">
Text
<tr><td colspan="3">Instructions</td></tr>
<tr><td colspan="3">
<ol>
<li>text1</li>
<li>text2</li>
<li>text3</li>
<ol>
</td></tr>
<tr><td colspan="3">
<i><p>
text4
</p></i>
</td></tr>
</table>
</form>
</ion-content>
</ion-view>
</script>
<script id="page2.html" type="text/ng-template">
<ion-view title="TITLE1">
<ion-content padding="true">
<form>
<table border="1">
<tr>
<td><input type="button" value="Save/Load" /></td>
<td><input type="button" value="Share" /></td>
<td><input type="button" value="Help" /></td>
</tr>
</table>
<table border="1">
<tr>
<td>Desired</td>
<td><input type="text" size="6" value="1.5" /></td>
<td>years</td>
</tr>
<tr>
<td> </td>
<th>CURRENT</th>
<th>FUTURE</th>
</tr>
<tr>
<td>Text5</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Text6</td>
<td><input type="text" size="3" value="4"></td>
<td><input type="text" size="3" value="1"></td>
</tr>
<tr>
<td>Text7</td>
<td><input type="text" size="3" value="20"></td>
<td><input type="text" size="3" value="30"></td>
</tr>
<tr>
<td>Text8</td>
<td><input type="text" size="3" value="40%"></td>
<td><input type="text" size="3" value="40%"></td>
</tr>
<tr>
<td>Text9</td>
<td><input type="text" size="3" value="2"></td>
<td><input type="text" size="3" value="1"></td>
</tr>
</table>
</form>
</ion-content>
</ion-view>
</script>
<script id="page3.html" type="text/ng-template">
<ion-view title="Page 3">
<ion-content padding="true">
<h1>PAGE 3</h1>
</ion-content>
</ion-view>
</script>
<script id="page4.html" type="text/ng-template">
<ion-view title="Page 4">
<ion-content padding="true">
<h1>PAGE 4</h1>
</ion-content>
</ion-view>
</script>
<script id="page5.html" type="text/ng-template">
<ion-view title="Page 5">
<ion-content padding="true">
<h1>PAGE 5</h1>
</ion-content>
</ion-view>
</script>
<script id="page6.html" type="text/ng-template">
<ion-view title="Page 6">
<ion-content padding="true">
<h1>PAGE 6</h1>
</ion-content>
</ion-view>
</script>
<script id="page7.html" type="text/ng-template">
<ion-view title="Page 7">
<ion-content padding="true">
<h1>PAGE 7</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
0
source to share
1 answer
The reset table elements have CSS, so you will have to reuse whatever CSS styles you want to use for your table. On a mobile phone, they are rarely the item you want.
What you probably want to do is use Ionic css grids. http://ionicframework.com/docs/components/#grid . You get the same layout as the table, but avoid using tables. Tables should not be used for layouts.
Here's your first look for you.
<script id="about.html" type="text/ng-template">
<ion-view title="About">
<ion-content padding="true">
<div class="row">
<div class="col"><input type="button" value="Save/Load" /></div>
<div class="col"><input type="button" value="Share" /></div>
<div class="col"><input type="button" value="Help" /></div>
</div>
<div class="row">
<div class="col">Text</div>
</div>
<div class="row">
<div class="col">Instructions</div>
</div>
<div class="row">
<div class="col">
<ol>
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ol>
</div>
</div>
<div class="row">
<div class="col">
<p><i>text4</i></p>
</div>
</div>
</ion-content>
</ion-view>
</script>
Ionic is designed to make things look like the native SDK makes things appear. The CSS reset they use reset everything well, but no additional styles are generated for the tables (possibly other elements as well). The element <ol>
also lacks styling as you intend to use the component list
.
0
source to share