angular.module('wineApp', [])
.controller('WinesCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.wines = [];
$scope.wine = {};
$http.get('http://daretodiscover.herokuapp.com/wines')
.then(function(response) {
$scope.wines = response.data;
});
$scope.createWine = function() {
$http.post('http://daretodiscover.herokuapp.com/wines', $scope.wine)
.then(function(response) {
var newWine = response.data;
$scope.wine = {};
$scope.wines.unshift(newWine);
});
};
$scope.updateWine = function(wine) {
$http.put('http://daretodiscover.herokuapp.com/wines/' + wine.id, wine)
.then(function(response) {
wine.editForm = false;
});
};
$scope.deleteWine = function(wine) {
$http.delete('http://daretodiscover.herokuapp.com/wines/' + wine.id)
.then(function(response) {
var wineIndex = $scope.wines.indexOf(wine);
$scope.wines.splice(wineIndex, 1);
});
};
}]);
<!DOCTYPE html>
<html lang="en" ng-app="wineApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Wine App</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="WinesCtrl">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2 class="text-center">Wine App</h2>
<hr>
<h4>Add New Wine</h4>
<form ng-submit="createWine()">
<div class="form-group">
<input type="text" ng-model="wine.name" class="form-control" placeholder="Name" autofocus>
</div>
<div class="form-group">
<input type="text" ng-model="wine.year" class="form-control" placeholder="Year">
</div>
<div class="form-group">
<input type="text" ng-model="wine.grapes" class="form-control" placeholder="Grapes">
</div>
<div class="form-group">
<input type="text" ng-model="wine.country" class="form-control" placeholder="Country">
</div>
<div class="form-group">
<input type="text" ng-model="wine.region" class="form-control" placeholder="Region">
</div>
<div class="form-group">
<input type="text" ng-model="wine.price" class="form-control" placeholder="Price">
</div>
<div class="form-group">
<input type="text" ng-model="wine.picture" class="form-control" placeholder="Picture">
</div>
<input type="submit" value="Save Wine" class="btn btn-default">
</form>
<hr>
<div ng-repeat="wine in wines">
<div class="row">
<div class="col-xs-4">
<img ng-src="{{wine.picture}}" class="img-responsive">
</div>
<div class="col-xs-8">
<div ng-hide="wine.editForm">
<h5>{{wine.name}}</h5>
<p><strong>Year:</strong> {{wine.year}}</p>
<p><strong>Grapes:</strong> {{wine.grapes}}</p>
<p><strong>Country:</strong> {{wine.country}}</p>
<p><strong>Region:</strong> {{wine.region}}</p>
<p><strong>Price:</strong> ${{wine.price}}</p>
<a ng-click="wine.editForm = true" href="javascript:void(0)" class="btn btn-default">Edit</a>
<a ng-click="deleteWine(wine)" href="javascript:void(0)" class="btn btn-default">Delete</a>
</div>
<form ng-show="wine.editForm" ng-submit="updateWine(wine)">
<div class="form-group">
<input type="text" ng-model="wine.name" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="text" ng-model="wine.year" class="form-control" placeholder="Year">
</div>
<div class="form-group">
<input type="text" ng-model="wine.grapes" class="form-control" placeholder="Grapes">
</div>
<div class="form-group">
<input type="text" ng-model="wine.country" class="form-control" placeholder="Country">
</div>
<div class="form-group">
<input type="text" ng-model="wine.region" class="form-control" placeholder="Region">
</div>
<div class="form-group">
<input type="text" ng-model="wine.price" class="form-control" placeholder="Price">
</div>
<input type="submit" value="Save Wine" class="btn btn-default">
</form>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</body>
</html>