angular解析json数据

最新推荐文章于 2024-02-22 15:38:22 发布

xy8199

最新推荐文章于 2024-02-22 15:38:22 发布

阅读量5.2k

点赞数 1

分类专栏： JavaScript 文章标签： json angular 数据

本文链接：https://blog.csdn.net/xy8199/article/details/78229548

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

这篇文章主要介绍了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文件，本文仅供参考

xy8199

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular解析json数据

这篇文章主要介绍了AngularJS获取json数据的方法,给大家分享一个简单的Demo。源码：html>html>head> meta charset="UTF-8"> script type="text/javascript" src="angular-1.3.0.js">script> title>title> script type="tex
复制链接

扫一扫