AngularJS Scope 表格

最新推荐文章于 2024-06-30 17:17:38 发布

zhang937008487

最新推荐文章于 2024-06-30 17:17:38 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/zhang937008487/article/details/78229895

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <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>

zhang937008487

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS Scope 表格

html>html>head lang="en"> meta charset="UTF-8"> script type="text/javascript" src="angular-1.3.0.js">script> title>title> script type="text/javascript"> var app=angular.modul
复制链接

扫一扫