ng 테이블 행의 가변 개수를 반복하십시오.

ng-repeat을 사용하여 가변 개수의 테이블 셀을 만드는 방법을 알고 있지만, 테이블 행을 사용하여이를 어떻게 수행합니까? 테이블 행 수가 각 열의 질문 수와 같아야하는 위험한 스타일의 게임을 만들려고합니다. 여기 내 JSON의 구조 방법은 다음과 같습니다ng 테이블 행의 가변 개수를 반복하십시오.

는

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

질문 컬럼에 추가해야합니다 app.js, 그들은 주제로 구성되어야한다. 나는 오른발에서 내릴 수 없다. 아래의 코드에서 질문 배열의 길이와 같은 수의 테이블 행을 만들려고 시도하지만 작동하지 않습니다.

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으로 이동하십시오. 당신은

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

내 샘플 JSON 다음과 같이 사용한다

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

는

$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 테이블 행의 가변 개수를 반복하십시오.

답변

관련 문제