- <!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","d"] },{"id":"c","title":"angularjs","author":"google","price":"40.99","pubdate":"2015-02-01",{"id":"d","title":"asp.net","author":"microsoft","price":"30.99","pubdate":"2015-11-01",]
- }
