<!doctype html>
<html ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
</head>
<body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search:
<input ng-model="query"> Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
});
/* Styles go here */
[
{
"age": 0,
"id": "motorola-xoom-with-wi-fi",
"imageUrl": "https://raw.githubusercontent.com/angular/angular-phonecat/master/app/img/phones/motorola-xoom-with-wi-fi.0.jpg",
"name": "Motorola XOOM\u2122 with Wi-Fi",
"snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
},
{
"age": 3,
"id": "dell-streak-7",
"imageUrl": "https://raw.githubusercontent.com/angular/angular-phonecat/master/app/img/phones/dell-streak-7.0.jpg",
"name": "Dell Streak 7",
"snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
},
{
"age": 8,
"id": "samsung-galaxy-tab",
"imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/samsung-galaxy-tab.0.jpg?raw=true",
"name": "Samsung Galaxy Tab\u2122",
"snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
},
{
"age": 13,
"carrier": "T-Mobile",
"id": "motorola-defy-with-motoblur",
"imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/motorola-defy-with-motoblur.0.jpg?raw=true",
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
"snippet": "Are you ready for everything life throws your way?"
},
{
"age": 14,
"carrier": "T-Mobile",
"id": "t-mobile-mytouch-4g",
"imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/t-mobile-mytouch-4g.0.jpg?raw=true",
"name": "T-Mobile myTouch 4G",
"snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
},
{
"age": 15,
"carrier": "US Cellular",
"id": "samsung-mesmerize-a-galaxy-s-phone",
"imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg?raw=true",
"name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone",
"snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
},
{
"age": 18,
"id": "t-mobile-g2",
"imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/t-mobile-g2.0.jpg?raw=true",
"name": "T-Mobile G2",
"snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
},
{
"age": 19,
"id": "motorola-charm-with-motoblur",
"imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/motorola-charm-with-motoblur.0.jpg?raw=true",
"name": "Motorola CHARM\u2122 with MOTOBLUR\u2122",
"snippet": "Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service."
}
]