如何在自定义表中显示数组数据？

Question

我创建了一个自定义表来显示一些键值对。它适用于带有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>

更新 rsesults现在显示在另一个之下，但是如果数组的长度增长，则数组对象将浮动显示在行的边界上。那么如何根据数组的长度来改变行的高度呢？

Answer 1

Array.isArray(data[attr.id])不会做到这一点。

相反，您可以将angular.isArray放在scope上，如下所示。

$scope.isArray = angular.isArray;

并将其内联使用

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

以下是 Working fiddle

希望这会有所帮助：）