【问题标题】:how to iterate 2 set data in ng-repeat如何在 ng-repeat 中迭代 2 组数据
【发布时间】:2019-05-12 07:15:28
【问题描述】:

是否可以在 ng repeat 中迭代 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>

【问题讨论】:

  • 你可以在另一个里面有一个 ng-repeat
  • 这样可以吗? {{data1.student_data}} {{data2.teacher_data}}
  • 您评论中的代码将打印所有学生...其次是所有老师...这就是您要找的吗?
  • 不,我要打印一列学生和一列老师!

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


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多