<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="angular-route@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-route.js"></script>
<script data-require="angular-resource@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-resource.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-view=""></div>
</body>
</html>
(function () {
var app = angular.module('app', ['ngRoute', 'ngResource']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/items', {
templateUrl: 'items.html',
controller: 'ItemsCtrl'
}).when('/payment', {
templateUrl: 'payment.html',
controller: 'PaymentCtrl'
}).otherwise({
redirectTo: '/items'
});
}]);
app.service('Items', ['$resource', function ($resource) {
return $resource('items.json');
}]);
app.controller('ItemsCtrl', ['$scope', 'Items', function ($scope, Items) {
$scope.items = Items.query();
$scope.selectedIDs = function () {
return $scope.items.filter(function (item) {
return item.selected;
}).map(function (item) {
return item.id;
//}).join('&id=');
}).join(',');
};
}]);
app.controller('PaymentCtrl', [
'$scope', '$routeParams', 'Items',
function ($scope, $routeParams, Items) {
//var id = $routeParams.id;
//id = typeof id === 'string' ? [id] : id;
var id = $routeParams.id.split(',');
$scope.items = [];
Items.query(function (items) {
$scope.items = items.filter(function (item) {
return ~id.indexOf(item.id + '');
});
});
$scope.totalPrice = function () {
return $scope.items.reduce(function (sum, item) {
return sum + item.price;
}, 0);
};
}
]);
})();
/* Styles go here */
<h1>Item list</h1>
<table>
<tr ng-repeat="item in items">
<td><input type="checkbox" ng-model="item.selected"/></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><a href="#/payment?id={{item.id}}">Buy</a></td>
</tr>
</table>
<a href="#/payment?id={{selectedIDs()}}">
Buy selected (#/payment?id={{selectedIDs()}})
</a>
<h1>Your items</h1>
<ul>
<li ng-repeat="item in items">
<b>{{item.name}}: </b>{{item.price}}<br/>
</li>
</ul>
Total price: {{totalPrice()}}
[
{ "id": 1, "name": "book", "price": 68},
{ "id": 2, "name": "pen", "price": 14},
{ "id": 3, "name": "paper", "price": 24},
{ "id": 4, "name": "shirt", "price": 109},
{ "id": 5, "name": "tie", "price": 137}
]