Я создал пользовательскую таблицу для отображения некоторых пар ключ-значение. Он работает отлично для простых примеров с 2 строками, но есть также пары с массивом как значение. Записи должны быть перечислены один ниже другого в той же таблице строк. Он должен выглядеть примерно так:
Кажется, что массив не реконструируется, как в 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 отображаются один под другим, но если длина массива растет, объекты массива отображаются плавающим над границей строки. Итак, как изменить высоту строки в соответствии с длиной массива?
Array.isArray(data[attr.id])
не будет делать трюк.
Вместо этого вы можете поместить angular.isArray
в scope
как angular.isArray
ниже.
$scope.isArray = angular.isArray;
и использовать его в качестве
<div ng-show="isArray(array)"></div>
Вот Рабочая скрипка
Надеюсь это поможет :)