Как отобразить данные массива в пользовательской таблице?

0

Я создал пользовательскую таблицу для отображения некоторых пар ключ-значение. Он работает отлично для простых примеров с 2 строками, но есть также пары с массивом как значение. Записи должны быть перечислены один ниже другого в той же таблице строк. Он должен выглядеть примерно так:
Изображение 174551

Кажется, что массив не реконструируется, как в HTML коде

<span ng-show="Array.isArray(data[attr.id])">

Можете ли вы, ребята, помочь мне правильно отобразить данные?


Вот мой код:

var app = angular.module('TestApp', []);

app.controller('TestCtrl', ['$scope' ,function($scope){
  
  $scope.isArray = angular.isArray;
  $scope.query = {};
  $scope.query.attributes = [{'name': 'key_1', 'id': 'key_1'}, 
                           {'name': 'key_2', 'id': 'key_2'}];
  
  $scope.data = {'key_1': 'value_1', 'key_2': ['value_2', 'value_3', 'value_4', 'value_6', 'value_7', 'value_8']};
  
}]);
.content-wrapper{
	font-family: 'Roboto';
	background: #EDEFF2;	
	height: calc(~"100vh - 198px");
	width: calc(~"100vw - 300px");
  float: left;

	.content-navbar{
		//background: green;

		.content-navbar-content{
			padding-top: 20px;
			margin-left: 20px;				
			font-size: 25px;
		}
		
	}

	.content-controlls{
		padding-top: 20px;
		padding-bottom: 20px;
		margin-left: 20px;
		//background: blue;
	}

	.content-contentview{
		padding-top: 20px;
		margin-left: 20px;
		padding-right: 300px;
		//background: yellow;

		.table-bordered{
			border: none;
			//border-top: 1px solid #999999;
			font-size: 13px;

			.table-header-roboto{				
				color: #999999;
			}

			.table-body-roboto{
				color: #4D4D4D;

				#info{
					font-size: 18px;
					color: #4D4D4D;
					padding-top: 2px;
					padding-left: 10px;	
				}

				#file{
					font-size: 18px;
					color: #606166;
					padding-top: 2px;	
				}
				.status{
					width: 50px;

				}
			}
		}		
	}
}

.header-status,
.header-info,
.header-task {
  display: inline-block;
  width: 50px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 13px;
  height: 24px;
  display: flex;
  align-items: center;
}

.header-task {
  border: none;
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
}

.row-status,
.row-info {
  display: inline-block;
  width: 50px;
  padding-left: 6px;
  padding-right: 5px;
}

.header-status span {
  margin-left: 0px;
}

.header-info span {
  margin-left: 4px;
}

.row-task,
.header-task {
  width: 1102px;
  padding-left: 6px;
  padding-right: 5px;
}

.custom-header-content {
  border: none;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #999999;
  display: flex;
  align-items: center;
}

.custom-header-content span {}

.custom-row-content {
  border: none;
  height: 48px;
  border-bottom: 1px solid #CCCCCC;
  color: #4D4D4D;
  display: flex;
  align-items: center;
}

.row-status span i {
  padding-bottom: 0px;
  margin-top: 3px;
  margin-left: 8px;
}

.row-info span i {
  padding-bottom: 0px;
  margin-top: 3px;
  margin-left: 8px;
}

.custom-table {
  width: 1200px;
  margin: 50px;
}

body {
  background: #EDEFF2;
  font-family: 'Roboto';
  font-size: 13px;
}

.view-navigation {
  padding-left: 50px;
  //padding-top: 10px;
  padding-bottom: 10px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
}
.view-navigation .counter {
  font-size: 13px;
  line-height:21px;
  vertical-align: top;
  color: #4D4D4D;
  margin-left: 15px;
}
.view-navigation span {
  padding-bottom: 0px;
  display: inline-block;
}
.view-navigation .material-icons {
  font-size: 21px;
  vertical-align:top;
  color: #A8A8A7;
  cursor: pointer; 
  cursor: hand;
}

#hoverfinger{
  cursor: pointer; 
  cursor: hand
}

.key, .value{
	display: inline-block;	
	padding-left: 5px;
	padding-right: 5px;
	font-size: 13px;
	height: 24px;
	display: flex;
	align-items: center;
}

.key{	
	width: 450px;
	font-weight: bold;
}

.value{
	width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="TestApp">
  <div class="custom-table" ng-controller="TestCtrl">        
    <div class="custom-row">
     <div class="custom-row-content" ng-repeat="attr in query.attributes">
        <div class="key"><span>{{attr.name}}</span></div>            
        <div class="value">
          <span ng-show="isArray(data[attr.id])">
            <span ng-repeat="objects in data[attr.id] track by $index">
              {{objects}}<br>
            </span>
          </span>
          <span ng-show="!isArray(data[attr.id])">
              {{data[attr.id]}}              
          </span>
        </div>
      </div>      
    </div>   
  </div>
</div>

UPDATE Теперь rseults отображаются один под другим, но если длина массива растет, объекты массива отображаются плавающим над границей строки. Итак, как изменить высоту строки в соответствии с длиной массива?

1 ответ

0
Лучший ответ

Array.isArray(data[attr.id]) не будет делать трюк.

Вместо этого вы можете поместить angular.isArray в scope как angular.isArray ниже.

$scope.isArray = angular.isArray;

и использовать его в качестве

<div ng-show="isArray(array)"></div>

Вот Рабочая скрипка

Надеюсь это поможет :)

  • 0
    Данные массива теперь отображаются один под другим, но если есть более 3 результатов, данные перемещаются по другим строкам, пожалуйста, посмотрите мой измененный код
  • 1
    Уважаемый downvoter, не могли бы вы прокомментировать, почему?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню