ng重複錶行的可變數量

我知道如何使用ng-repeat創建可變數量的表格單元格，但是如何對錶格行執行此操作？我試圖創建一個危險的風格遊戲，其中表格行的數量應該等於每列中的問題數量。這裏是我的JSON是如何構成的：ng重複錶行的可變數量

app.js

$scope.subjects = [ 
{topic:'politics',question:['How do we fix our bloated economy?'],answer:'We trim the Fiat'} 
//more questions & topics 
    ]

問題應加列，他們應該按主題。我不能右腳下去;在下面的代碼中，我嘗試創建與問題數組長度相等的錶行數，但它不起作用。

view5.html

<table> 
<tr ng-repeat='i in subjects[0].question'> 
    <!-- <td ng-repeat='subject.question[i] in subjects'></td> should get question for the corresponding topic --> 
</tr> 

</table>

來源

2017-02-19 st4rgut

您可以使用下面的代碼。另請參閱http://skillcram.com/AngularJS.htm以獲取工作示例。

enter code here 


<table border> 
    <caption>ng-repeat</caption> 
    <tr ng-repeat="citiTemp in citiTemperatures"> 
     <td>{{ citiTemp.time }}</td> 
     <td>{{ citiTemp.temp }}</td> 
    </tr> 
</table> 
mainApp.controller('example2Controller', function($scope, $http) { 
    $scope.citiTemperatures = [ 
     { time:"12:00", 
      temp:"0" 
     }, 
     { time:"02:00", 
      temp:"05" 
     }, 
     { time:"04:00", 
      temp:"10" 
     }, 
     { time:"06:00", 
      temp:"15" 
     }, 
     { time:"08:00", 
      temp:"20" 
     } 

    ]; 
});

來源

2017-02-19 03:57:17

您應該使用如下

<table ng-repeat='subject in subjects'> 
    <tr> 
     <td ng-repeat="question in subject.question track by $index"> 
      {{question}} 
     </td> 
    </tr> 
    </table>

我的樣品JSON是

$scope.subjects = [{ 
    topic: 'politics', 
    question: ['How do we fix our bloated economy?', 
    'a?', 'How do we fix our bloated economy?'], 
    answer: 'We trim the Fiat' 
    }, { 
    topic: 'politics', 
    question: ['How do we fix our bloated economy?'], 
    answer: 'We trim the Fiat' 
    }, { 
    topic: 'politics', 
    question: ['How do we fix our bloated economy?'], 
    answer: 'We trim the Fiat' 
    }];

LIVE DEMO

來源

2017-02-19 04:18:28 Aravind

試試這個，看看我是如何在tr使用ng-repeat 。

<!DOCTYPE html> 
 
<html ng-app="app"> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
\t <script type="text/javascript"> 
 
\t \t var app = angular.module('app',[]); 
 
\t \t app.controller('myCtrl', function myCtrl($scope) { 
 
\t \t \t // body... 
 
\t \t \t $scope.myArray = [{ 
 
\t \t \t \t id:1, 
 
\t \t \t \t name:'A' 
 
\t \t \t },{ 
 
\t \t \t \t id:2, 
 
\t \t \t \t name:'B' 
 
\t \t \t },{ 
 
\t \t \t \t id:3, 
 
\t \t \t \t name:'C' 
 
\t \t \t },{ 
 
\t \t \t \t id:4, 
 
\t \t \t \t name:'D' 
 
\t \t \t }]; 
 
\t \t }) 
 

 
\t </script> 
 
\t <style type="text/css"> 
 
\t \t table, th , td { 
 
\t \t \t border: 1px solid grey; 
 
\t \t \t border-collapse: collapse; 
 
\t \t \t padding: 5px; 
 
\t \t } 
 
\t \t table tr:nth-child(odd) { 
 
\t \t \t background-color: #f1f1f1; 
 
\t \t } 
 
\t \t table tr:nth-child(even) { 
 
\t \t \t background-color: #ffffff; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body ng-controller="myCtrl"> 
 
\t <table> 
 
\t \t <tr ng-repeat="x in myArray"> 
 
\t \t \t <td>{{ x.id }}</td> 
 
\t \t \t <td>{{ x.name }}</td> 
 
\t \t </tr> 
 
\t </table> 
 
</body> 
 
</html>

來源

2017-02-19 05:57:01

ng重複錶行的可變數量

回答

相關問題