How do I create this code timeline/component HTML/CSS with Angular 1 using ng-repeat in DOM? (no knowledge of angular required)

Question

I have two arrays:

$scope.code1 = [5,24,1,5,8,10];
$scope.code2 = [1,1,2,2,3,4,5];

I want to have the template look something like this:

Though I am having trouble getting it to look that way. My current code is along the lines of:

<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>

How do I get my HTML/CSS to look like what I am wanting to show in my picture above?

Where is the ng-repeat attribute in your markup? why dont you at least try something and see what happens? — andrew
– andrew, Commented Apr 25, 2017 at 1:57
I have, but excluded it cause I wanted this question to be accessible to people who don't know angular. I have tried a number of things, but it keeps looking screwed up. — Rolando
– Rolando, Commented Apr 25, 2017 at 1:59

zoly01 · Accepted Answer · 2017-04-25 02:27:37Z

<!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>

The clear property is directly related to floats. If the element can fit horizontally in the space next to another element which is floated, it will. Unless you apply clear to that element in the same direction as the float. Then the element will move down below the floated element.

Community · Accepted Answer · 2017-05-23 12:25:52Z

Edited a little CSS from zoly01's answer and here is the code:

<div style="float:left;margin-right:5px;width:100%">
<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" ng-repeat="code in code1 track by $index">
  <div style="text-align:center">{{$index+1}}</div>
  <div style="border:1px #000 solid;width:24px;height:24px;text-align: center;line-height: 24px;margin-right:5px">
    {{code}}
  </div>
</div>
</div>

Working Plnkr

Changes to his answer:

Added width:100%to outer div so that next element shows in next line
$index+1 so that no. shows up correctly
Added text-align:center to $index so that it shows up in center
Added margin-right:5px so that every box have some space between them

Collectives™ on Stack Overflow

How do I create this code timeline/component HTML/CSS with Angular 1 using ng-repeat in DOM? (no knowledge of angular required)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related