AngularJS：如何在HTML中使用兩個ng-repeat來顯示對象值

我想要做的是創建一個表格，我將在其中提供表格的內容，標題（thead）和主體。內容將是一個JSON對象，標題和主體屬性將是數組。AngularJS：如何在HTML中使用兩個ng-repeat來顯示對象值

什麼我迄今所做的：

在控制器數據（MainCtrl）

$scope.people = [ 
    { 
     "name": "Adam", 
     "age": "21", 
     "town": "IL", 
     "work": "Manager" 
    }, 
    { 
     "name": "Christina", 
     "age": "25", 
     "town": "MS", 
     "work": "Designer" 
    }, 
    { 
     "name": "Luke", 
     "age": "22", 
     "town": "VA", 
     "work": "Developer" 
    } 
] 

$scope.heads = ["Name", "Age", "Work"] 
$scope.attrs = ["name", "age", "work"]

我設法顯示標題，但問題是{{ person.attr }}。我無法訪問屬性。

<table> 
    <thead> 
     <tr> 
      <th ng-repeat="head in heads">{{ head }}</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="person in people"> 
      <td ng-repeat="attr in attrs"> {{ person.attr }} </td> 
     </tr> 
    </tbody> 
</table>

我想實現的是：

Name  Age  Work 
----------------------------------- 
Adam  21   Manager 
Christina 25   Designer 
Luke  22   Developer

來源

2017-07-23 Ajay Gupta

你試圖在對象的人，不存在訪問鍵名「ATTR」。你應該使用person[attr]。

<tr ng-repeat="person in people"> 
     <td ng-repeat="attr in attrs"> {{ person[attr] }} </td> 
</tr>

來源

2017-07-23 08:45:59 Dij

工作正常！如何訪問是兩個和三個層次深的數據，如 ' { 「名」：「盧克」，「時代」：「22」，地方：{「鎮」：「VA」}，「work」：「Developer」 } ' –

person ['places'] ['town']是應該如何做的一個例子。 – Dij

如果attr已修復，則不需要循環兩次。

你可以做的是：

<tr ng-repeat="person in people"> 
    <td> {{ person.name }} </td> 
    <td> {{ person.age}} </td> 
    <td> {{ person.work }} </td> 
</tr>

或者（如果attr不固定）：

<tr ng-repeat="person in people"> 
    <td ng-repeat="attr in attrs"> {{person[attr]}} </td> 
</tr>

var app = angular.module("appModule", []); 
 

 
var appController = app.controller("AppController", AppController); 
 

 
appController.$inject = ['$scope']; 
 

 
function AppController($scope){ 
 

 
    $scope.people = [ 
 
    { 
 
     "name": "Adam", 
 
     "age": "21", 
 
     "town": "IL", 
 
     "work": "Manager" 
 
    }, 
 
    { 
 
     "name": "Christina", 
 
     "age": "25", 
 
     "town": "MS", 
 
     "work": "Designer" 
 
    }, 
 
    { 
 
     "name": "Luke", 
 
     "age": "22", 
 
     "town": "VA", 
 
     "work": "Developer" 
 
    } 
 
]; 
 

 
$scope.heads = ["Name", "Age", "Work"]; 
 
$scope.attrs = ["name", "age", "work"]; 
 

 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app = "appModule"> 
 
    <table ng-controller = "AppController"> 
 
    <thead> 
 
     <tr> 
 
      <th ng-repeat="head in heads">{{ head }}</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="person in people"> 
 
      <td ng-repeat="attr in attrs"> {{ person[attr]}} </td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
</html>

來源

2017-07-23 08:46:43

<table> 
    <thead> 
     <tr> 
      <th ng-repeat="head in heads">{{ head }}</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="person in people"> 
      <td ng-repeat="attr in attrs"> {{ person[attr] }} </td> 
     </tr> 
    </tbody> 
</table>

當ü稱之爲person.attr它會試圖找到人對象ATTR

來源

2017-07-23 08:47:02

使用NG重複的。如果你想使用'.'操作，那麼你必須提供個人屬性打印這種方式{{person[attr]}}

來源

2017-07-23 08:51:25

人應該是人 –

感謝您的糾正。 :) –

1. 像person.name person.town

2. 如果你想從attrs數組中獲取特徵，你可以試試這個。

<tbody> 
     <tr ng-repeat="person in people"> 
      <td ng-repeat="attr in attrs"> {{ person[attr]}} </td> 
     </tr> 
    </tbody

來源

2017-07-23 08:51:40

AngularJS：如何在HTML中使用兩個ng-repeat來顯示對象值

回答

相關問題