Hilfe bei der Programmierung, Antworten auf Fragen / Html / Wie erstelle ich diese Code-Timeline / Komponenten-HTML / CSS mit Angular 1 unter Verwendung von ng-repeat in DOM? (keine Kenntnis des Winkels erforderlich) - HTML, CSS, Winkeljs

Wie erstelle ich diese Code-Timeline / Komponente HTML / CSS mit Angular 1 mit ng-repeat in DOM? (keine Ahnung von Winkel erforderlich) - html, css, angularjs

Ich habe zwei Arrays:

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

Ich möchte, dass die Vorlage ungefähr so aussieht:

Obwohl ich Schwierigkeiten habe, es so aussehen zu lassen. Mein aktueller Code lautet wie folgt:

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

Wie kann ich mein HTML / CSS so aussehen lassen, wie ich es in meinem obigen Bild anzeigen möchte?

Antworten:

0 für die Antwort № 1

Ein wenig editiert CSS von Antwort von zoly01 und hier ist der 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>

Arbeiten Plnkr

Änderungen an seiner Antwort:

Hinzugefügt width:100%zum äußeren div, so dass das nächste Element als nächstes angezeigt wird Linie
$index+1 so dass nein. wird richtig angezeigt
Hinzugefügt text-align:center zu $index so dass es in der Mitte erscheint
Hinzugefügt margin-right:5px so dass jede Box etwas Abstand hat

1 für die Antwort № 2

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

Wie erstelle ich diese Code-Timeline / Komponente HTML / CSS mit Angular 1 mit ng-repeat in DOM? (keine Ahnung von Winkel erforderlich) - html, css, angularjs

Antworten:

Verwandte Fragen