格式化显示来自 angularjs 的数据答案

【问题标题】：formatting displaying data from angularjs格式化显示来自 angularjs 的数据
【发布时间】：2017-07-03 17:35:46
【问题描述】：

API 连接良好并显示显示数据，现在面临将数据格式化为表格的问题。使用 ng-repeat="item in items"，如果在 tr 中使用，则只显示 1 行，如果在 tbody 中使用，则重复 tbody。

HTML 代码

                    <tbody ng-repeat="item in itemsc">
                    <tr >
                        <th width="15%">Country</th>
                        <td width="85%">{{item.name}}</td>
                    </tr>
                    <tr>
                        <th>Flag</th>
                        <td>
                            <img ng-src="/assets/images/f/{{item.iso2 | lowercase}}.png"  />
                        </td>
                    </tr>
                    <tr>
                        <th>Capital</th>
                        <td>{{item.capital}}</td>
                    </tr>
                    <tr>
                        <th>Region</th>
                        <td>{{item.region}}</td>
                    </tr>
                    <tr>
                        <th>Region</th>
                        <td>{{item.subRegion}}</td>
                    </tr>
                    <tr>
                        <th>GPS</th>
                        <td>Latitude: {{item.latitude}}  |  Longitude: {{item.longitude}}</td>
                    </tr>
                </tbody>

保持这样的数据格式。 国家、国旗、首都、地区、GPS 是静态的。

> ------------------------------- 
|  Country |  Value              |
> -------------------------------
|  Flag |  Value              |
> -------------------------------
|  Catpital |  Value              |
> -------------------------------
|  Region |  Value              |
> -------------------------------
|  GPS |  Value              |
> -------------------------------

【问题讨论】：

将ng-repeat 放在table 上

标签： angularjs

【解决方案1】：

根据您的要求，简单的方法是更改您传递给列表 (itmes) 的对象结构

例如。

[{
  "column1Value": "Country",
  "column2Value": "Value"
}, {
  "column1Value": "Flag",
  "column2Value": "Value"
}, {
  "column1Value": "Capital",
  "column2Value": "Value"
}, {
  "column1Value": "Region",
  "column2Value": "Value"
}, {
  "column1Value": "GPS",
  "column2Value": "Value"
}]

【讨论】：

【解决方案2】：

下面添加的代码 sn-p：请查看角代码，以及它在表格中的实现方式。干杯！

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	<script type="text/javascript">
		angular.module("todoApp", [])
		.controller("MainController", function($scope){
			$scope.Products = [];
			
			for(var i = 0; i < 3; i++)
			{
				var app = {
					ProductId: i,
					ProductName: 'ProductName' + (i + 1),
					ProductCategory: 'ProductCategory' + (i + 1)
				};
			
				$scope.Products.push(app);
			}
		});
	</script>
  </head>
  <body ng-app="todoApp">
    <div ng-controller="MainController">
		<table>
			<tbody ng-repeat="product in Products">
			<tr>
				<td>
					<div style="padding-bottom: 10px;">
						<table border="1" cellpadding="2">
							<tr>
								<td>Sr.No</td>
								<td>{{$index + 1}}</td>
							</tr>
							<tr>
								<td>Product Name</td>
								<td>{{product.ProductName}}</td>
							</tr>
							<tr>
								<td>Product Category</td>
								<td>{{product.ProductCategory}}</td>
							</tr>
						</table>
					</div>
				</td>
			</tr>
			</tbody>
		</table>
    </div>
  </body>
</html>

尝试将 ng-repeat="item in itemsc" 从 tbody 移动到 tr。
这应该可以解决您的问题。

理想情况下，格式应为：

<table>
<thead>
<tr>
<td>Sr.#</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="prop in Properties">
<td>{{$index + 1}}</td>
<td>{{prop.Name}}</td>
</tr>
</tbody>
</table>

【讨论】：

不，那么它只重复 tr，'KEY' 是静态的。只有“值”是从 angularjs 函数中获取的。