從JSON數據與angularjs和NG-重複

創建表，我有以下數據作爲JSON：從JSON數據與angularjs和NG-重複

{ 
    "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-重複一個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循環遍歷我的回合，然後通過我的excercises ，但創建表格時，我總是需要每個練習的第一個，然後是每個練習的第二個，等等。

有人可以幫我解決這個問題嗎？

ps。如果您對json中的這些數據有更好的佈局的想法，歡迎您提出建議，我是json（和angularjs）的新手。

來源

2014-03-05 user1616332

更新下面的例子中使用的表，而不是李。請注意ng：repeat仍被使用。 –

您正在尋找的解決方案是在Angular官方教程中。在本教程中，電話從JSON文件using Angulars $http service加載。在下面的代碼中，我們使用$ http.get加載保存在電話目錄中的文件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>

來源

2014-03-05 21:09:52

我用相同的代碼嘗試過它，它與列表一起工作，但我需要一張桌子！ – user1616332

謝謝，這正是我需要的！ – user1616332

我不確定這是由於Angular的更新還是錯誤，但我相信ng：repeat應該是ng-repeat。當我使用ng：repeat時，出現錯誤，但它與ng-repeat一起使用。我正在使用包含外部谷歌腳本的方法：謝謝！ – Slopes

您可以使用$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>

所以最好你可以去我的代碼來創建動態表，按你的數據列和行會增加或減少..

來源

2015-04-25 04:24:04

釷在你的代碼中是靜態的。它應該是動態的，根據數據增加列 – santoshK

要使用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

來源

2015-10-02 04:34:44 Manish

簡單的方法取出的參考以用於創建在正常表動態頭部和單元：

<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" 
}]

來源

2016-02-21 06:05:41 santoshK

角2或4：

沒有更多的ng-repeat，它現在是最新的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"}]

來源

2017-09-28 14:18:14 balazs630

從JSON數據與angularjs和NG-重複

回答

相關問題