格式化顯示來自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的數據

回答

相關問題