JohnDizzle JohnDizzle - 2 months ago 6
AngularJS Question

How to display array data in custom table?

I created a custom table to display some key-value-pairs. It works fine for simple examples with 2 Strings but there are also pairs with an array as value. The entries should get listed one below the other in the same table row. It should look something like this:

enter image description here

It seems that the array is not recornized as in the

HTML
Code

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


Can you guys help me to display the data properly?




Here is my Code:



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
The rseults are now displayed one below the other but if the length of the array grows, the array-objects are displayed floating over the border of the row. So how to change the height of the row according to the length of the array?

Answer

Array.isArray(data[attr.id]) won't do the trick.

Instead You can put angular.isArray on the scope like below.

$scope.isArray = angular.isArray;

and use it inline as

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

Here is the Working fiddle

Hope this helps :)