<!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",]
} 原文链接：https://www.f2er.com/angularjs/149035.html