格式化显示来自angularjs的数据

API连接良好并显示显示数据，现在面临将数据格式化到表格中的问题。使用ng-repeat =“项目中的项目”, 如果在tr中使用，那么只有1行显示，如果在tbody中使用，则其重复tbody。格式化显示来自angularjs的数据

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

来源

2017-02-15 faisal

把'NG-repeat'的'table'代替 –

的代码片段添加如下：请看看角码，和方式，在一个表中实现。干杯。！

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

尝试从tbody移动ng-repeat="item in itemsc"到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>

来源

2017-02-15 07:21:03

没有，那么它的重复的TR而已， 'KEY' 是静态的。只有'Value'是从angularjs函数中获取的。 – faisal

根据您的要求最简单的方式来做到这一点正在改变要传递到列表中的对象结构（itmes）

如。

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

来源

2017-02-15 09:18:57

格式化显示来自angularjs的数据

回答

相关问题