我有两个数组:
$scope.code1 = [5,24,1,5,8,10];
$scope.code2 = [1,1,2,2,3,4,5];
我想让模板看起来像这样:
虽然我很难让它看起来像那样。我当前的代码是这样的:
<div style="position:absolute">
<div style="float:left;margin-right:5px;">Code 1</div>
<div style="float:left" ng-repeat="code in code1 track by $index"> <!-- I ng-repeat this -->
<div>{{$index}}</div>
<div style="border:1px #000 solid;">{{code}}</div>
</div>
</div>
如何让我的 HTML/CSS 看起来像我想在上面的图片中显示的那样？
最佳答案
<!DOCTYPE html>
<html>
<head>
<title>List Viewer</title>
<style type="text/css">
</style>
</head>
<body>
<div style="float:left;margin-right:5px;">
<div style="height:24px;"></div>
<div style="height:24px;text-align: center;line-height: 24px;">Code 1</div>
</div>
<div style="float:left;margin-right:5px;"> <!-- I ng-repeat this -->
<div style="width:24px;height:24px;text-align: center;line-height: 24px;">1</div>
<div style="border:1px #000 solid;width:24px;height:24px;text-align: center;line-height: 24px;">5</div>
</div>
<div style="float:left;margin-right:5px;">
<div style="width:24px;height:24px;text-align: center;line-height: 24px;">2</div>
<div style="border:1px #000 solid;width:24px;height:24px;text-align: center;line-height: 24px;">24</div>
</div>
<div style="float:left;margin-right:5px;">
<div style="width:24px;height:24px;text-align: center;line-height: 24px;">3</div>
<div style="border:1px #000 solid;width:24px;height:24px;text-align: center;line-height: 24px;">1</div>
</div>
<div style="float:left;margin-right:5px;">
<div style="width:24px;height:24px;text-align: center;line-height: 24px;">4</div>
<div style="border:1px #000 solid;width:24px;height:24px;text-align: center;line-height: 24px;">5</div>
</div>
<div style="float:left;margin-right:5px;">
<div style="width:24px;height:24px;text-align: center;line-height: 24px;">5</div>
<div style="border:1px #000 solid;width:24px;height:24px;text-align: center;line-height: 24px;">8</div>
</div>
<div style="float:left;margin-right:5px;">
<div style="width:24px;height:24px;text-align: center;line-height: 24px;">6</div>
<div style="border:1px #000 solid;width:24px;height:24px;text-align: center;line-height: 24px;">10</div>
</div>
<div style="clear: both;margin-bottom: 20px;"></div>
<div style="float:left;margin-right:5px;">
<div style="height:24px;"></div>
<div style="height:24px;text-align: center;line-height: 24px;">Code 2</div>
</div>
<div style="float:left;margin-right:5px;"> <!-- I ng-repeat this -->
<div style="width:24px;height:24px;text-align: center;line-height: 24px;">1</div>
<div style="border:1px #000 solid;width:24px;height:24px;text-align: center;line-height: 24px;">1</div>
</div>
<div style="float:left;margin-right:5px;">
<div style="width:24px;height:24px;text-align: center;line-height: 24px;">2</div>
<div style="border:1px #000 solid;width:24px;height:24px;text-align: center;line-height: 24px;">1</div>
</div>
</body>
</html>关于html - 如何在 DOM 中使用 ng-repeat 使用 Angular 1 创建此代码时间轴/组件 HTML/CSS？ (不需要 Angular 知识)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43600306/