【发布时间】：2014-08-24 07:21:51
【问题描述】：
所以，我仍然处于学习这些框架中发生的一些事情的复制粘贴祈祷阶段。但是我看不到在我的侧边菜单导航到的视图中我能做什么或不能做什么。
这是整个页面。有什么建议么？我正在使用 Firefox，将窗口打开为近似 iPhone 形状并加载 index.html。
我不想使用老式的表格标签。另一方面，我没有看到什么会起作用。我想要合理的 CSS 样式的 HTML。但是视图甚至不能显示一个 html 表格？
<!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>
【问题讨论】：