angularjs(2)

最新推荐文章于 2022-01-13 11:09:05 发布

ilvseyinfu

最新推荐文章于 2022-01-13 11:09:05 发布

阅读量483

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJs

本文链接：https://blog.youkuaiyun.com/qq_31751569/article/details/52233009

AngularJs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的图书商店应用实例，该应用具备书籍列表展示、搜索及排序功能，并通过$http服务从JSON文件中加载数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="zh-ch" ng-app="bookStoreApp">
<head>
<meta charset="UTF-8">
<meta name="viewport"  content="width=divice-width ,initial-scale=1">    
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>    
    
<title>bookstore</title>
</head>

<body class="container" ng-controller="bookStoreListController">

    
    <h1>Booksotre <small>{{"Liu" + "Yixiang"}}</small></h1>
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
            <select ng-model="orderByProp">
                <option value="title">title</option>
                <option value="author">author</option>
                <option value="price">price</option>
                <option value="pubdate">pubdate</option>
            </select>
        </div>
        <div class="col-sm-4">
            <input placeholder="Enter query" class="form-control" ng-model="query">
        </div>
    </div>
    <ul class="list-group">

        <li class="list-group-item" ng-repeat="book in books | filter:query |orderBy: orderByProp" >
            <div class="row">
                <div class="col-sm-3">
                
                <img src="images/{{book.id}}.png" alt="{{book.id}}" class="img-responsive img-thumbnail">
                </div>
                <div class="col-sm-9">
                    <blockquote>
                        <h2>{{book.title}}</h2>
                        <footer>{{book.author}}</footer>
                    </blockquote>
                    <div class="text-right">
                        <button class="btn btn-primary">
                            <span clas="glyphicon glyphicon-shopping-cart"></span>
                        {{book.price}}
                        </button>
                    
                    </div>
                </div>
            </div>
        </li>
    </ul>
    
    
    
    <script>
    
    var bookStoreApp = angular.module('bookStoreApp' , []);
        
    bookStoreApp.controller('bookStoreListController' , function($scope,$http){
         $http.get("data/books.json").success(function(resp){
             $scope.books=resp.data;
         });
        
        $scope.orderByProp = "title";
        
    }) ; 
    
    </script>
</body>
</html>

json:

{
    "data":[
            {"id":"a","title":"html", "author":"w3c","price":"10.99", "pubdate":"2015-01-01","status":"true","images":["a","b","c","d"] },
            {"id":"b","title":"java", "author":"oraclce","price":"20.99", "pubdate":"2015-03-01","status":"false","images":["a","b","c","d"]  },
            {"id":"c","title":"angularjs", "author":"google","price":"40.99", "pubdate":"2015-02-01","status":"true","images":["a","b","c","d"]  },
            {"id":"d","title":"asp.net", "author":"microsoft","price":"30.99", "pubdate":"2015-11-01","status":"false","images":["a","b","c","d"]  },
        ]
    
    
    
}