如何使用角度js在html中显示json文件数据?

时间:2018-01-11 13:01:26

标签: javascript html angularjs json

get_student_details.json

{
    "student": [
       {
           "studentname": "MANNAT SACHDEVA",
           "Class": "3",
           "percentage": "96",
           "student_answer": [
                {
                    "1": "C",
                    "2": "A"
                }
           ],
            "correct_answer": [
                {
                    "1": "C",
                    "2": "A"
                }
            ]
       }
   ]
}

的index.php

<html>
    <head>
        <link href="css/style.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
        <script>
            function studentController($scope, $http) {
                var url = "http://localhost/olm/get_student_details.json";
                $http.get(url).success(function (response) {
                    $scope.student_details = response;
                });
            }
        </script>
    </head>
<body>
    <div class="container" id="whole-page">
        <div class="col-lg-12" id="box">
            <div ng-app="" ng-controller="studentController">
                <div ng-repeat="detail in student_details">
                    <table>
                        <tr>
                            <td>
                                <h3>Student Name</h3>
                                <h1 style="color: rgb(19, 191, 255);">{{ detail.studentname }}</h1>
                            </td>
                            <td>
                                <h3>Class</h3>
                                <h1>{{ detail.class }}</h1>
                            </td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>
                                <h3 id="left" style="margin-top:60px;">PERCENTAGE</h3>
                                <div id="right">
                                    <h2 id="percent">{{ detail.percent }}%</h2>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table style="margin-top:15px;">
                        <tr>
                            <td>
                                <ol id = "limheight">
                                    <li>1 - {{ detail.student_answer }} <span id="ans">{{ detail.correct_answer }}</span></li>
                                </ol> 
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我是角度js的新手,我想将json文件数据,即get_student_details.json显示到index.html文件中。现在我已经创建了一个函数来将json数据插入index.html之后我重新加载index.php什么都没发生它保持不变我不知道我做错了什么。那么,我该如何解决这个问题呢?请帮帮我。

谢谢

0 个答案:

没有答案