JSONとして次のデータがあります。
{
"Workout1": {
"Name": "First",
"Rounds": [
{
"Exercises": [
{
"Name": "Exercise1",
"Repeat": 10
},
{
"Name": "Exercise2",
"Repeat": 10
},
{
"Name": "Exercise3",
"Repeat": 10
}
]
},
{
"Exercises": [
{
"Name": "Exercise1",
"Repeat": 20
},
{
"Name": "Exercise2",
"Repeat": 20
},
{
"Name": "Exercise3",
"Repeat": 20
}
]
},
{
"Exercises": [
{
"Name": "Exercise1",
"Repeat": 30
},
{
"Name": "Exercise2",
"Repeat": 30
},
{
"Name": "Exercise3",
"Repeat": 30
}
]
}
]
}
}
それに、angularjsとng-repeatを含むHTMLテーブルとして表示したいと思います。次の表を取得します。
<table class="table">
<tr>
<th>Round1</th>
<th>Round2</th>
<th>Round3</th>
</tr>
<tr>
<td>10 Exercise1</td>
<td>20 Exercise1</td>
<td>30 Exercise1</td>
</tr>
<tr>
<td>10 Exercise2</td>
<td>20 Exercise2</td>
<td>30 Exercise2</td>
</tr>
<tr>
<td>10 Exercise3</td>
<td>20 Exercise3</td>
<td>30 Exercise3</td>
</tr>
</table>
テーブルプレビューの場合: http://jsfiddle.net/54pD8/
私の問題は、htmlテーブルが行ベースで動作していることです。ラウンドとエクササイズでng-repeatを繰り返すことができますが、テーブルを作成するには、各エクササイズの最初と2番目のエクササイズなどが常に必要です。
誰かがこの問題で私を助けることができますか?
追伸jsonでこのデータのレイアウトを改善するアイデアがあれば、あなたの提案を歓迎します。json(およびangularjs)は初めてです。
探しているソリューションは、Angularの公式チュートリアルにあります。このチュートリアルでは、電話はJSONファイルからロードされます Angulars $ httpサービスを使用 。以下のコードでは、$ http.getを使用して、phonesディレクトリに保存されたphones.jsonファイルをロードします。
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
});
次に、電話を反復処理します。
<table>
<tbody ng-repeat="i in phones">
<tr><td>{{i.name}}</td><td>{{$index}}</td></tr>
<tr ng-repeat="e in i.details">
<td>{{$index}}</td>
<td>{{e.foo}}</td>
<td>{{e.bar}}</td></tr>
</tbody>
</table>
通常のテーブルに動的なヘッダーとセルを作成するための簡単な方法:
<table width="100%" class="table">
<thead>
<tr>
<th ng-repeat="(header, value) in MyRecCollection[0]">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in MyRecCollection | filter:searchText">
<td ng-repeat="cell in row">{{cell}}</td>
</tr>
</tbody>
</table>
MyApp.controller('dataShow', function ($scope, $http) {
//$scope.gridheader = ['Name','City','Country']
$http.get('http://www.w3schools.com/website/Customers_MYSQL.php').success(function (data) {
$scope.MyRecCollection = data;
})
});
JSONデータ:
[{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Ernst Handel",
"City": "Graz",
"Country": "Austria"
}, {
"Name": "FISSA Fabrica Inter. Salchichas S.A.",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Galería del gastrónomo",
"City": "Barcelona",
"Country": "Spain"
}, {
"Name": "Island Trading",
"City": "Cowes",
"Country": "UK"
}, {
"Name": "Königlich Essen",
"City": "Brandenburg",
"Country": "Germany"
}, {
"Name": "Laughing Bacchus Wine Cellars",
"City": "Vancouver",
"Country": "Canada"
}, {
"Name": "Magazzini Alimentari Riuniti",
"City": "Bergamo",
"Country": "Italy"
}, {
"Name": "North/South",
"City": "London",
"Country": "UK"
}, {
"Name": "Paris spécialités",
"City": "Paris",
"Country": "France"
}, {
"Name": "Rattlesnake Canyon Grocery",
"City": "Albuquerque",
"Country": "USA"
}, {
"Name": "Simons bistro",
"City": "København",
"Country": "Denmark"
}, {
"Name": "The Big Cheese",
"City": "Portland",
"Country": "USA"
}, {
"Name": "Vaffeljernet",
"City": "Århus",
"Country": "Denmark"
}, {
"Name": "Wolski Zajazd",
"City": "Warszawa",
"Country": "Poland"
}]
JSONを使用してHTMLテーブルを作成するには、AngularJSのngRepeat
ディレクティブを使用します。
例
[〜#〜] html [〜#〜]
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td></tr>
</table>
</div>
</body>
</html>
JavaScript
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.names = [
{ "Name" : "Max Joe", "City" : "Lulea", "Country" : "Sweden" },
{ "Name" : "Manish", "City" : "Delhi", "Country" : "India" },
{ "Name" : "Koniglich", "City" : "Barcelona", "Country" : "Spain" },
{ "Name" : "Wolski", "City" : "Arhus", "Country" : "Denmark" }
];
});
上記の例では、jsonからテーブルを作成しました。 http://www.tutsway.com/create-html-table-using-json-in-angular-js.php から参照を取得しました
Angular 2または4:
Ng-repeatはもうありません。* ngForの最近のAngularバージョン!
<table style="padding: 20px; width: 60%;">
<tr>
<th align="left">id</th>
<th align="left">status</th>
<th align="left">name</th>
</tr>
<tr *ngFor="let item of myJSONArray">
<td>{{item.id}}</td>
<td>{{item.status}}</td>
<td>{{item.name}}</td>
</tr>
</table>
この単純なJSONを使用しました:
[{"id":1,"status":"active","name":"A"},
{"id":2,"status":"live","name":"B"},
{"id":3,"status":"active","name":"C"},
{"id":6,"status":"deleted","name":"D"},
{"id":4,"status":"live","name":"E"},
{"id":5,"status":"active","name":"F"}]
JSONを表形式でレンダリングするには:
<table>
<thead>
<tr>
<th ng-repeat="(key, value) in vm.records[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in vm.records">
<td ng-repeat="(key, value) in value">
{{value}}
</td>
</tr>
</tbody>
</table>
$http.get()
メソッドを使用して、JSON
ファイルを取得できます。次に、応答データを$scope
オブジェクトに割り当てます。 HTML
でテーブルを作成するには、$ scopeオブジェクトにng-repeatを使用します。 ng-repeat
は、データを列に動的にバインドできるこのループ内で行をループします。
コードを確認し、静的テーブルを作成しました
<table>
<tr>
<th>Name</th>
<th>Relationship</th>
</tr>
<tr ng-repeat="indivisual in members">
<td>{{ indivisual.Name }}</td>
<td>{{ indivisual.Relation }}</td>
</tr>
</table>
私のコードに行くと、列と行のデータが増減するため、動的なテーブルを作成できます。