个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
谁能帮我弄清楚如何在 html/angular/bootstrap 中完成以下操作？
我有如下数据:
在我的页面上，我想这样显示:
最佳答案
如果您使用的是 angularjs，这就是您需要做的:
Code in controller
$scope.data = [ { OrderDate: "1/15/2018", Quantity: 10, Price: "$ 50" },
{ OrderDate: "1/16/2018", Quantity: 20, Price: "$ 100" },
{ OrderDate: "1/17/2018", Quantity: 30, Price: "$ 150" }
];
Code on html page:
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="(key, val) in data[0]">
<th>
{{ key }}
</th>
<td data-ng-repeat="row in data">
{{ row[key] }}
</td>
</tr>
</tbody>
</table>
输出是这样的
这是为每 10 行添加填充的代码:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
var app = angular.module("myApp", []);
app.controller('testCtrl', function($scope) {
$scope.data = [
{column_1: "1,1",column_2: "1,2",column_3: "1,3",column_4: "1,4",column_5: "1,5",column_6: "1,6",column_7: "1,7",column_8: "1,8",column_9: "1,9",column_10: "1,10",column_11: "1,11",column_12: "1,12",column_13: "1,13",column_14: "1,14",column_15: "1,15",column_16: "1,16",column_17: "1,17",column_18: "1,18",column_19: "1,19",column_20: "1,20",column_21: "1,21",column_22: "1,22",column_23: "1,23",column_24: "1,24",column_25: "1,25",column_26: "1,26",column_27: "1,27",column_28: "1,28",column_29: "1,29",column_30: "1,30"},
{column_1: "2,1",column_2: "2,2",column_3: "2,3",column_4: "2,4",column_5: "2,5",column_6: "2,6",column_7: "2,7",column_8: "2,8",column_9: "2,9",column_10: "2,10",column_11: "2,11",column_12: "2,12",column_13: "2,13",column_14: "2,14",column_15: "2,15",column_16: "2,16",column_17: "2,17",column_18: "2,18",column_19: "2,19",column_20: "2,20",column_21: "2,21",column_22: "2,22",column_23: "2,23",column_24: "2,24",column_25: "2,25",column_26: "2,26",column_27: "2,27",column_28: "2,28",column_29: "2,29",column_30: "2,30"}];
});
}());
</script>
<style>
table tr:nth-of-type(10n) td{
padding-bottom: 50px;
}
table td, table th{
border: 1px solid #ffffff !important;
}
</style>
</head>
<body ng-controller="testCtrl">
<table class="table">
<tbody>
<tr data-ng-repeat="(key, val) in data[0]" class="test">
<th>
{{ key }}
</th>
<td data-ng-repeat="row in data">
{{ row[key] }}
</td>
</tr>
</tbody>
</table>
</body>
</html>关于javascript - html Angular 表 - 类似枢轴的显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49074852/
25
4
0
学习SQL。有一个简单的带有字段标题的桌面游戏。我想根据标题进行搜索。如果我有一款名为 Age of Empires III: Dynasties 的游戏，并且我使用 LIKE 和参数 Age of
我正在尝试为以下数据结构创建镜头。我正在使用lens-family . data Tree = Tree { _text :: String, _subtrees ::
我发现很难理解这一点。比如说，在 Python 中，如果我想要一个根据用户输入在循环中修改的列表，我会有这样的内容: def do_something(): x = [] while(
我有一个像这样的 mysql 查询 SELECT group_name FROM t_groups WHERE group_name LIKE '%PCB%'; 结果是 group_name ----
我的数据库表中有超过一百万条记录。当我使用like时非常慢，当我使用match against时他们丢失了一些记录。 我创建帮助表: 标签列表 tag_id tag_name tag_rel_me
我在我的一个 Java 项目中使用 JXBrowser 来简单显示 googlemaps 网页，以便我可以在那里跟踪路线，但最近我想改进该项目，但我的问题是 JXBrowser 的许可证过期(只有一个
小问题:如何将 mysql_escape_string 变量包含在 like 子句中？ "SELECT * FROM table WHERE name LIKE '%". %s . "%'" 或
我尝试使用几个jquery消息插件，例如alertify . 但我注意到的主要事情是系统消息框会停止后台功能，直到用户响应。其他插件没有此功能。 有没有办法将此功能添加到 jquery 插件中？可以扩
我是 Ruby 新手。我过去使用过 shell。我正在将 shell 程序转换为 ruby。我有以下命令 cmd="cat -n " + infile + " | grep '127.0.0.1
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
当我研究 Rust 时，我试图编写一个 Rust 函数来查看任何可迭代的字符串。 我最初的尝试是 fn example_1(iter: impl Iterator); fn example_2(ite
我必须在我的项目中使用代码拆分。但无论如何，第一次初始下载有一些代码。 现在我想向最终用户展示代码下载(.cache.html - 或其他代码拆分)的进度，例如 gmail 启动进度。 请你帮帮我。
我今天找到了一个错误，它最终是由我代码中的以下片段引起的(我试图在列表中仅过滤“PRIMARY KEY”约束): (filter #(= (% :constraint_type "PRIMARY KE
我正在尝试在关键字段上实现检查约束。关键字段由 3 个字符的前缀组成，然后附加数字字符(可以手动提供，但默认是从序列中获取整数值，然后将其转换为 nvarchar)。关键字段定义为 nvarhcar(
我正在尝试使用以下方式创建 List 实例: List listOne = new ArrayList(); List listTwo = new ArrayList(){}; List listTh
我过去曾为 iOS 开发过，最近转向了 mac 开发。我开始了一个“感受”事物的项目，但遇到了一个问题。我试图创建一个 NSTableView 来显示多个项目，包括一个标签、一个 2 UIImageV
我正在尝试编写一个查询，该查询将返回哪些主机缺少某个软件: Host Software A Title1 A
AFAIK，在三种情况下别名是可以的 仅限定符或符号不同的类型可以互为别名。 struct 或 union 类型可以为包含在其中的类型设置别名。 将 T* 转换为 char* 是可以的。 (不允许相反
\s 似乎不适用于 sed 's/[\s]\+//' tempfile 当它为工作时 sed 's/[ ]\+//' tempfile 我正在尝试删除由于命令而出现在每行开头的空格: nl -s ')
我正在使用 ocamlgraph 在 ocaml 中编写程序，并想知道是否要将其移植到 F# 我有哪些选择？谢谢。 最佳答案 QuickGraph .Net 最完整的图形库之一 关于F# 图形库(类似
我是一名优秀的程序员,十分优秀！