So, I am still somewhat at the copy-paste-pray stage of learning some of what is going on in these frameworks. But I cannot see what I can or cannot do in the view being navigated to by my side-menu.
Here is the entire page. Any suggestions? I am using Firefox, opening the window to be approximately iPhone shaped and loading the index.html.
I do not want to use old-fashioned table tags. On the other hand, I am not seeing what will work. I want reasonable CSS-style HTML. But the view cannot even show an 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's 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>
