Question

API连接良好并显示显示数据，现在面临将数据格式化为表格的问题。使用 ng-repeat =“项目中的项目”，如果在 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              |
> -------------------------------

Answer 1

下面添加了代码段：请查看角度代码，以及在表格中实现的方式。干杯！

<!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>

Answer 2

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

例如

＆＃13;

views.py

＆＃13;

格式化显示angularjs的数据

2 个答案: