angular 获取json字符串

最新推荐文章于 2021-12-06 15:36:41 发布

Anni的咖啡

最新推荐文章于 2021-12-06 15:36:41 发布

阅读量1.6k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/zhou__9468/article/details/78225461

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.使用

angular获取字符串需要将所需要的字符串导入工程项目中,然后再进行对字符串元素获取的操作

二.进行代码展示

<!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.controller("bookCtrl", function ($scope, $http) {
            $http({
                method: "GET",
                url: "book.json"
            }).success(function (data, status, headers, config) {
                $scope.book = data;
            }).error(function (data, status, headers, config) {
                console.log(status);
            });
        });

        app.controller("bookListCtrl", function ($scope, $http) {
            $http({
                method: "GET",
                url: "books.json"
            }).success(function (data, status, headers, config) {
                $scope.books = data;
            }).error(function (data, status, headers, config) {
                console.log(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="bookListCtrl">
    <table border="1">
        <tr>
            <th>NO</th>
            <th>ID</th>
            <th>标题</th>
            <th>是否推荐</th>
            <th>价格</th>
        </tr>
        <tbody ng-repeat="book in books">
        <tr>
            <td>{{$index}}</td>
            <td>{{book.id}}</td>
            <td>{{book.title}}</td>
            <td>
                <i ng-if="book.isRecommend">是</i>
                <i ng-if="!book.isRecommend">否</i>
            </td>
            <td>{{book.price}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>