如何在ng-repeat中迭代2组数据

时间:2018-12-11 10:08:25

标签: angularjs html-table angularjs-ng-repeat

是否可以在ng重复中迭代2个设置数据,或者我必须将2个设置数据合并为1?

<tbody>
 <tr ng-repeat="data1 in student_data, data2 in teacher_data | limitTo: itemsPerPage : currentTop">
    <td>{{data1.student_name}}</td>
    <td>{{data2.teacher_name}}</td>
</tr>
</tbody>

1 个答案:

答案 0 :(得分:1)

我想这就是你想要的...

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
    $scope.students = ['student1' ,'student2' ,'student3' ,'student4' ,'student5' ,'student6'];
    $scope.teachers = ['teacher1' ,'teacher2' ,'teacher3' ,'teacher4' ,'teacher5'];
    
});
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in students" ng-init="outerIndex=$index">
   		<td>{{ $index + 1 }}</td>
    	<td>{{ x }}</td>
    	<ng-container >
      	 <td ng-repeat="y in teachers" ng-init="innerIndex=$index" ng-show="$index==$parent.$index">
        	<ng-container >
        		<span>{{y}}</span> 
        	</ng-container>
          </td>
    	</ng-container>
  </tr>
</table>
</div>