angularjs遍历两次

最新推荐文章于 2020-06-03 11:13:28 发布

曹振华

最新推荐文章于 2020-06-03 11:13:28 发布

阅读量2.7k

点赞数

分类专栏： angularjs 文章标签： angularjs 遍历

本文链接：https://blog.csdn.net/chadcao/article/details/41148833

版权

angularjs 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

@{
    Layout = null;
}
<!DOCTYPE html>
<html ng-app="my_app">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("my_app", []);
        app.controller('my_controller', function ($scope) {
            var vm = $scope.vm = {};
            vm.classes = [
                {
                    classID: 1, className: '一班',
                    students: [
                        { studentID: 1, studentName: '张三' },
                        { studentID: 2, studentName: '李四' }
                    ]
                },
                {
                    classID: 2, className: '二班',
                    students: [
                        { studentID: 3, studentName: '王五' },
                        { studentID: 4, studentName: '马六' }
                    ]
                },
                {
                    classID: 3, className: '三班',
                    students: [
                        { studentID: 5, studentName: '曹七' },
                        { studentID: 6, studentName: '余八' }
                    ]
                },
                { classID: 4, className: '四班' }
            ];
        });
    </script>
</head>
<body ng-controller="my_controller">
    <table>
        <tr ng-repeat="class in vm.classes">
            <td>{{class.classID}}</td>
            <td>{{class.className}}</td>
            <td>
                <table>
                    <tr ng-repeat="student in class.students">
                        <td>{{student.studentID}}</td>
                        <td>{{student.studentName}}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>  
</body>
</html>