<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=yes">
<script src="../angular/angular.min.js"></script>
<script src="angular_v2.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="print, projection, screen" />
<title>List items</title>
</head>
<body>
<script>
</script>
<div ng-app="DemoApp" ng-controller="DemoController">
<input ng-model="text"><button ng-click="add_item()">Add</button>
<table id="items-table" class="tablesorter">
<thead>
<tr><th>Item</th><th>Date</th><th>X</th></tr>
</thead>
<tbody>
<tr ng-repeat="i in data.items track by $index"><td>{{ i.text }}</td><td class="date" sort="{{ i.date }}">{{ i.date }}</td><td><button class="delete" ng-click="delete(i.id)">x</button></td></tr>
</tbody>
</table>
<div>
<button class="delete" ng-click="delete(3)">Delete ID 3</button>
</div>
<div id="error" ng-show="error">{{error}}</div>
</div>
</body>
</html>
angular.module("DemoApp", [])
.controller("DemoController", ['$scope', '$http', function($scope, $http) {
var error = function(response) {
console.log("error", response);
$scope.error = response.data.text;
}
$scope.add_item = function() {
$scope.error = '';
$http.post('http://127.0.0.1:3000/api/v2/item', {text: $scope.text} ).then(
function(response) {
console.log(response);
$scope.result = response.data;
//console.log($scope.items);
$scope.get_items();
}, error
);
$scope.text = '';
}
$scope.get_items = function() {
$scope.error = '';
$http.get('http://127.0.0.1:3000/api/v2/items').then(
function(response) {
//console.log(response);
$scope.data = response.data;
console.log($scope.data);
}, error
);
}
$scope.delete = function(id) {
console.log(id);
$scope.error = '';
$http.delete('http://127.0.0.1:3000/api/v2/item/' + id).then(
function(response) {
console.log(response);
$scope.get_items();
}, error
);
}
$scope.error = '';
$scope.get_items();
}]);