angularjs解析数据展示在表格两种方法

来源：互联网发布：java爬虫框架编辑：程序博客网时间：2024/06/09 21:59

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="angular-1.3.0.js"></script>    <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(res){                $scope.book=res.data;            },function(res){                console.log(res.status);            });        });        app.controller("bookslistCtrl",function($scope,$http){            $http.get("books.json").then(function(response){               $scope.books=response.data;            });        });*/        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.value("url_books","books.json");        app.controller("bookslistCtrl",function($scope,$http){            $http.get("books.json").then(function(response){                $scope.books=response.data;            }),function(response){                console.log(response.status);            };        });        app.controller("myCtrl",function($scope,$interval,$timeout){            $interval(function(){               $scope.nowtime=nowtime();            },1000);        });        var nowtime=function(){            return  new Date().toLocaleDateString()+" "+new Date().toLocaleTimeString();        }    </script></head><body ng-app="myApp"><div ng-controller="myCtrl"><div>{{ nowtime}}</div></div>    <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="bookslistCtrl">    <table border="1">        <tr>            <th>NO</th>            <th>ID</th>            <th>标题</th>            <th>类型</th>            <th>描述</th>            <th>图片</th>            <th>是否推荐</th>            <th>上架时间</th>        </tr>        <tr ng-repeat="book in books">            <th>{{$index}}</th>            <th>{{book.id}}</th>            <th>{{book.title}}</th>            <th>{{book.type}}</th>            <th>{{book.description}}</th>            <th><img style="width: 100px;height: 100px;;" src="{{book.picture}}"></th>            <th>                <i ng-if="book.isRecommend">是</i>                <i ng-if="!book.isRecommend">否</i>            </th>            <th>{{book.dtCreated}}</th>        </tr>    </table></div></body></html>

[  {    "id": 1,    "title": "Java编程思想",    "type": "编程语言",    "description": "C++、Java中的圣经级著作",    "picture": "http://img14.360buyimg.com/n1/jfs/t2191/111/699154754/198998/32d7bfe0/5624b582Nbc01af5b.jpg",    "isRecommend": false,    "dtCreated": "00-00 00:01"  },  {    "id": 2,    "title": "C++编程思想",    "type": "编程语言",    "description": "1994年度JOLT大奖获奖图书荣获第6届Jolt生产效率大奖获奖图书",    "picture": "http://img14.360buyimg.com/n1/18448/80f61267-950f-4654-b34a-529add85c898.jpg",    "isRecommend": false,    "dtCreated": "00-00 00:02"  },  {    "id": 3,    "title": "高性能MySQL",    "type": "数据库",    "description": "2013年排名前十的技术影响力引进图书之一",    "picture": "http://img13.360buyimg.com/n1/g10/M00/17/1C/rBEQWFF00eMIAAAAAADX132P3PkAAEqmABYSIQAANfv613.jpg",    "isRecommend": false,    "dtCreated": "00-00 00:03"  },  {    "id": 4,    "title": "深入浅出MySQL",    "type": "数据库",    "description": "MySQL原创图书之一，网易技术部DBA组时隔5年再献力作，把MySQL用到高境界的实践，高性能mysql指导指南，mysql数据库必备宝典！",    "picture": "http://img10.360buyimg.com/n1/g13/M01/11/06/rBEhU1LQxrAIAAAAAAKmO7XSO1AAAH0uQBQfwoAAqZT742.jpg",    "isRecommend": false,    "dtCreated": "00-00 00:04"  },  {    "id": 5,    "title": "MySQL必知必会",    "type": "数据库",    "description": "紧贴实战需要，适用于广大软件开发和数据库管理人员学习参考",    "picture": "http://img13.360buyimg.com/n1/jfs/t2593/48/3523110588/234188/577f99d9/5791b08fN4ebfbc11.png",    "isRecommend": false,    "dtCreated": "00-00 00:05"  },  {    "id": 6,    "title": "SQL解惑",    "type": "数据库",    "description": "75个妙趣横生的SQL谜题",    "picture": "http://img11.360buyimg.com/n1/13432/1b9b929e-959f-4b1a-8902-41ca33eac7c2.jpg",    "isRecommend": true,    "dtCreated": "00-00 00:06"  },  {    "id": 7,    "title": "密码编码与信息安全",    "type": "编程算法",    "description": "讨论密码编码学与信息安全的基本原理，并以基本原理为基础，重在探讨C++的实现方法",    "picture": "http://img13.360buyimg.com/n1/jfs/t1582/250/1010212162/143094/e5722c42/55b82ef1N4375ed30.jpg",    "isRecommend": false,    "dtCreated": "00-00 00:07"  },  {    "id": 8,    "title": "数据结构与算法分析",    "type": "编程算法",    "description": "讨论密码编码学与信息安全的基本原理，并以基本原理为基础，重在探讨C++的实现方法",    "picture": "http://img14.360buyimg.com/n1/jfs/t2464/214/2764818483/66820/e6d31dfc/56ef155aN993b4639.jpg",    "isRecommend": false,    "dtCreated": "00-00 00:08"  }]

阅读全文

0 0