所以，我仍然处于复制 - 粘贴 - 祈祷阶段，学习这些框架中正在发生的一些事情。但是，在我的旁边菜单导航到的视图中，我无法看到我能做什么或不能做什么。
这是整个页面。有什么建议？我正在使用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>
答案 0 :(得分：0)
表格元素由CSS重置，因此您必须重新应用您希望的所有CSS样式。在移动设备中，它们很少是您想要的项目。
您可能想要做的是使用Ionic css网格。 http://ionicframework.com/docs/components/#grid您获得的表格与表格大致相同，但避免使用表格。表格不应用于布局。
这是您第一次为您重做的视图。
<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旨在使事物看起来像本机SDK使事物出现。他们使用的CSS重置很好地重置了一切，但是没有为表设置其他样式（也可能是其他元素）。 <ol>元素也缺少样式，因为您将使用list组件。