0
Я создал пользовательскую таблицу для отображения некоторых пар ключ-значение. Он работает отлично для простых примеров с 2 строками, но есть также пары с массивом как значение. Записи должны быть перечислены один ниже другого в той же таблице строк. Это должно выглядеть примерно так:
Как отобразить данные массива в пользовательской таблице?
кажется, что массив не recornized как в 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{
\t font-family: 'Roboto';
\t background: #EDEFF2; \t
\t height: calc(~"100vh - 198px");
\t width: calc(~"100vw - 300px");
float: left;
\t .content-navbar{
\t \t //background: green;
\t \t .content-navbar-content{
\t \t \t padding-top: 20px;
\t \t \t margin-left: 20px; \t \t \t \t
\t \t \t font-size: 25px;
\t \t }
\t \t
\t }
\t .content-controlls{
\t \t padding-top: 20px;
\t \t padding-bottom: 20px;
\t \t margin-left: 20px;
\t \t //background: blue;
\t }
\t .content-contentview{
\t \t padding-top: 20px;
\t \t margin-left: 20px;
\t \t padding-right: 300px;
\t \t //background: yellow;
\t \t .table-bordered{
\t \t \t border: none;
\t \t \t //border-top: 1px solid #999999;
\t \t \t font-size: 13px;
\t \t \t .table-header-roboto{ \t \t \t \t
\t \t \t \t color: #999999;
\t \t \t }
\t \t \t .table-body-roboto{
\t \t \t \t color: #4D4D4D;
\t \t \t \t #info{
\t \t \t \t \t font-size: 18px;
\t \t \t \t \t color: #4D4D4D;
\t \t \t \t \t padding-top: 2px;
\t \t \t \t \t padding-left: 10px; \t
\t \t \t \t }
\t \t \t \t #file{
\t \t \t \t \t font-size: 18px;
\t \t \t \t \t color: #606166;
\t \t \t \t \t padding-top: 2px; \t
\t \t \t \t }
\t \t \t \t .status{
\t \t \t \t \t width: 50px;
\t \t \t \t }
\t \t \t }
\t \t } \t \t
\t }
}
.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{
\t display: inline-block; \t
\t padding-left: 5px;
\t padding-right: 5px;
\t font-size: 13px;
\t height: 24px;
\t display: flex;
\t align-items: center;
}
.key{ \t
\t width: 450px;
\t font-weight: bold;
}
.value{
\t 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 теперь отображаются одна под другой, но если длина массива растет, объекты массива отображаются плавающим над границей строки. Итак, как изменить высоту строки в соответствии с длиной массива?
Массива данным теперь отображаемые один ниже других, но если более трех результатов, данные плавают над другими строками, PLS см. мой измененный код – JohnDizzle
Уважаемый downvoter, можете ли вы прокомментировать почему? –
Нет, я не решил проблему – JohnDizzle