angularjsのデータを表示する書式設定

APIが正しく接続され、表示データが表示され、データを表に書式設定する問題があります。 ng-repeat = "item in item", trの場合、tbodyで使用している場合は1行のみが表示され、tbodyが繰り返されます。angularjsのデータを表示する書式設定

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

HTMLコードは、このようなデータ形式にしてください。 国、旗、Catpital、地域、GPSは静的です。 角度コードを見て、そしてそれは、テーブルに実装される方法してください：

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

出典

2017-02-15 faisal

なし、その繰り返しがTRのみ、 'KEY' は静的である代わりに –

コードは、以下の追加スニペット。乾杯。！

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

trにtbodyからng-repeat="item in itemsc"を移動してみてください。
これはおそらくあなたの問題を解決するはずです。

理想的なフォーマットのようにする必要があります：（itmes）あなたの条件によれば、これを行う簡単な方法は、あなたがリストに渡しているオブジェクトの構造を変更している

<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

'table'に' NG-repeat'を入れてください。 '値'のみがanglejs関数からフェッチされています。 – faisal

例えば。

[{ 
 
    "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のデータを表示する書式設定

答えて

関連する問題