Angular 响应式 Table 无法在 Internet Explorer 9 (IE 9) 上运行。适用于 IE 10
Angular Responsive Table not working on Internet Explorer 9 (IE 9). Works with IE 10
我真的希望有人能在这方面帮助我。我正在尝试使用 André Werlang(又名 awerlang)的简单但出色的 Angular responsive table plugin。
它在 IE 10+、Chrome 和 Firefox 上运行良好。正如标题所说,它在 IE 9 上不起作用。这是一个 Live Demo 您可以在 IE 中打开的插件(并通过调试器模拟 IE 9,或者可能)。
我将 ng-repeat 示例与 Bootstrap 一起使用(倒数第二个)。数据加载和所有内容,但调整大小到堆栈 table 无法正常工作。我已经尝试将 'data-' 前缀添加到 'ng-app' 和 'ng-controller',但没有任何变化。
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdn.rawgit.com/awerlang/angular-responsive-tables/master/release/angular-responsive-tables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/awerlang/angular-responsive-tables/master/release/angular-responsive-tables.min.css">
</head>
<body data-ng-controller="TestController as ctrl">
<table class="table table-bordered table-striped table-hover" wt-responsive-table>
<thead>
<tr>
<th>Name</th>
<th>Version</th>
<th>Language</th>
<th>Maintainer</th>
<th>Stars</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in ctrl.projects">
<td>{{item.name}}</td>
<td>{{item.version}}</td>
<td>{{item.language}}</td>
<td>{{item.maintainer}}</td>
<td>{{item.stars}}</td>
</tr>
</tbody>
</table>
<script>
function TestController() {
this.projects = [
{name: "AngularJS", version: "1.5", language: "JavaScript", maintainer: "Google", stars: 35000},
{name: "Bootstrap", version: "3.3", language: "CSS", maintainer: "Twitter", stars: 23000},
{name: "UI-Router", version: "0.13", language: "JavaScript", maintainer: "AngularUI", stars: 15000}
];
}
var app = angular.module('app', ['wt.responsive']);
app.controller('TestController', TestController);
</script>
</body>
</html>
它应该如何显示 (IE 11) 与它应该如何显示 (IE 9) - 对不起大快照。
提前致谢!
您可以尝试的一件事是将 float: left;
添加到 table 中的每个元素。通过在页面顶部添加 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
,我也很幸运地在 IE 9 中使用 tables。
让我知道这是否有效!
我真的希望有人能在这方面帮助我。我正在尝试使用 André Werlang(又名 awerlang)的简单但出色的 Angular responsive table plugin。
它在 IE 10+、Chrome 和 Firefox 上运行良好。正如标题所说,它在 IE 9 上不起作用。这是一个 Live Demo 您可以在 IE 中打开的插件(并通过调试器模拟 IE 9,或者可能)。
我将 ng-repeat 示例与 Bootstrap 一起使用(倒数第二个)。数据加载和所有内容,但调整大小到堆栈 table 无法正常工作。我已经尝试将 'data-' 前缀添加到 'ng-app' 和 'ng-controller',但没有任何变化。
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdn.rawgit.com/awerlang/angular-responsive-tables/master/release/angular-responsive-tables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/awerlang/angular-responsive-tables/master/release/angular-responsive-tables.min.css">
</head>
<body data-ng-controller="TestController as ctrl">
<table class="table table-bordered table-striped table-hover" wt-responsive-table>
<thead>
<tr>
<th>Name</th>
<th>Version</th>
<th>Language</th>
<th>Maintainer</th>
<th>Stars</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in ctrl.projects">
<td>{{item.name}}</td>
<td>{{item.version}}</td>
<td>{{item.language}}</td>
<td>{{item.maintainer}}</td>
<td>{{item.stars}}</td>
</tr>
</tbody>
</table>
<script>
function TestController() {
this.projects = [
{name: "AngularJS", version: "1.5", language: "JavaScript", maintainer: "Google", stars: 35000},
{name: "Bootstrap", version: "3.3", language: "CSS", maintainer: "Twitter", stars: 23000},
{name: "UI-Router", version: "0.13", language: "JavaScript", maintainer: "AngularUI", stars: 15000}
];
}
var app = angular.module('app', ['wt.responsive']);
app.controller('TestController', TestController);
</script>
</body>
</html>
它应该如何显示 (IE 11) 与它应该如何显示 (IE 9) - 对不起大快照。
提前致谢!
您可以尝试的一件事是将 float: left;
添加到 table 中的每个元素。通过在页面顶部添加 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
,我也很幸运地在 IE 9 中使用 tables。
让我知道这是否有效!