如何使用嵌套的ng-repeat

时间:2015-06-08 05:31:46

标签: angularjs

我需要一些帮助来制作嵌套的ng-repeat。 我有以下代码,它没有嵌套。目前它首先打印所有主题,然后打印所有学生名称。

但是,我需要为每个科目打印学生。 我如何在嵌套的ng-repeat中转换它?

<tr>
    <td>Student</td>
    <td width="100px" ng-repeat="subject in subjects" colspan="3">{{subject.Name}}
</td>
</tr>

<tr>
<th width="296"></th>
    <th class="rotate-45" ng-repeat="student in studentNames">
        <div>
            <span>{{student}}</span>
        </div>
    </th>
</tr>

1 个答案:

答案 0 :(得分:0)

以下是嵌套ng-repeat的示例。这可能对you.happy编码有帮助

<body  ng-app="WeeklyApp" ng-controller="WeeklyController" >
        <div ng-repeat="week in myData">
           <div ng-repeat="day in week.days">
              {{day.dow}} - {{day.templateDay}}
              <b>Jobs:</b><br/> 
               <ul>
                 <li ng-repeat="job in day.jobs"> 
                   {{job.name}} 
                 </li>
               </ul>
           </div>
        </div>
    </body>

    <script>
    var WeeklyApp = angular.module('WeeklyApp', []);

    WeeklyApp.controller('WeeklyController', ['$scope', function ($scope) {
        $scope.myData = [{
                "number" : "2013-W45",
                "days" : [{
                        "dow" : "1",
                        "templateDay" : "Monday",
                        "jobs" : [{
                                "name" : "Wakeup",
                                "jobs" : [{
                                        "name" : "prepare breakfast",

                                    }
                                ]
                            }, {
                                "name" : "work 9-5",

                            }
                        ]
                    }, {
                        "dow" : "2",
                        "templateDay" : "Tuesday",
                        "jobs" : [{
                                "name" : "Wakeup",
                                "jobs" : [{
                                        "name" : "prepare breakfast",

                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ];

    }]);
    </script>