У меня есть два массива:

$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 выглядеть так, как я хочу показать на картинке выше?

0
Rolando 25 Апр 2017 в 04:51

2 ответа

Лучший ответ

Немного отредактировано CSS из ответа zoly01, и вот код:

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

Работающий Plnkr

Изменения в его ответе:

  • Добавлен width:100% во внешний div, чтобы следующий элемент отображался в следующем линия
  • $index+1 так что нет. правильно отображается
  • Добавлено text-align:center в $index, чтобы оно отображалось в центре
  • Добавлено margin-right:5px, чтобы между каждым ящиком было свободное пространство
0
Community 23 Май 2017 в 12:25
<!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>
1
zoly01 25 Апр 2017 в 02:27