angularjs遍历两次

展示班级与学生信息的网页应用

最新推荐文章于 2021-06-05 01:52:34 发布

原创最新推荐文章于 2021-06-05 01:52:34 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #遍历

angularjs 专栏收录该内容

29 篇文章

订阅专栏

本博客展示了如何使用Angular构建一个简单的网页应用，该应用可以显示不同班级及其学生的信息。

@{
    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>