这篇文章主要介绍了AngularJS获取json数据的方法,给大家分享一个简单的Demo。

源码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.value("url_book", "book.json");
        app.value("url_books", "books.json");

        app.controller("bookCtrl", function ($scope, $http) {
            $http.get("book.json").then(function (response) {
                $scope.book = response.data;
            }, function (response) {
                console.log(response.status);
            });
        });

        app.controller("booksCtrl", function ($scope, $http) {
            $http.get("books.json").then(function (response) {
                $scope.books = response.data;
            }, function (response) {
                console.log(response.status);
            });
        });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="bookCtrl">
    <ul>
        <li>ID:{{ book.id }}</li>
        <li>标题:{{ book.title }}</li>
        <li>类型:{{ book.type }}</li>
        <li>描述:{{ book.description }}</li>
        <li>图片:<img src="{{ book.picture }}"/></li>
        <li>是否推荐:{{ book.isRecommend }}</li>
        <li>上架时间:{{ book.dtCreated }}</li>
    </ul>
</div>

<div ng-controller="booksCtrl">
    <table border="1">
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>类型</th>
            <th>描述</th>
            <th>图片</th>
            <th>推荐</th>
            <th>创建时间</th>
        </tr>
        <tbody ng-repeat="book in books">
        <tr>
            <td>{{book.id}}</td>
            <td>{{book.title}}</td>
            <td>{{book.type}}</td>
            <td>{{book.description}}</td>
            <td>
                <img src="{{book.picture}}" width="80px" height="80px"/>
            </td>
            <td>
                <i ng-if="book.isRecommend"></i>
                <i ng-if="!book.isRecommend"></i>
            </td>
            <td>{{book.dtCreated}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
实现效果还需要用到本地的json文件,本文仅供参考

GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e 4 个月前
8c391e04 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐