<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<style>
#divFullScreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: grey;
opacity: .8;
}
.ajaxIndicator {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px;
margin-top: -32px;
display: block;
}
</style>
</head>
<body>
<div data-ng-controller="maximController" class="container">
<div class="row">
<div class="col-md-12">
<strong class="error">{{ error }}</strong>
<p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a></p>
<form name="addmaxim" data-ng-show="addMode" style="width:600px;margin:0 auto;">
<div class="form-group">
<label for="cname" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="please enter your name" data-ng-model="newmaxim.name" required />
</div>
</div>
<div class="form-group">
<label for="content" class="col-sm-2 control-label">Content:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="content" placeholder="please enter your content" data-ng-model="newmaxim.content" required />
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addmaxim.$valid" class="btn btn-primary" />
<input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
</div>
</div>
<br />
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width:100%;">
<tr>
<th>#</th>
<td>이름</td>
<th>명언</th>
<th></th>
</tr>
<tr data-ng-repeat="maxim in maxims">
<td><strong data-ng-hide="maxim.editStatus">{{ maxim.id }}</strong></td>
<td>
<p data-ng-hide="maxim.editStatus">{{ maxim.name }}</p>
<input data-ng-show="maxim.editStatus" type="text" data-ng-model="maxim.name" />
</td>
<td>
<p data-ng-hide="maxim.editStatus">{{ maxim.content }}</p>
<input data-ng-show="maxim.editStatus" type="text" data-ng-model="maxim.content" />
</td>
<td>
<p data-ng-hide="maxim.editStatus"><a data-ng-click="toggleEdit(maxim)" href="javascript:;">Edit</a> | <a data-ng-click="deletemaxim(maxim)" href="javascript:;">Delete</a></p>
<p data-ng-show="maxim.editStatus"><a data-ng-click="save(maxim)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(maxim)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="divFullScreen" data-ng-show="loading">
<img src="/images/ajaxIndicator.gif" class="ajaxIndicator" />
</div>
</div>
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script>
(function () {
'use strict';
var app = angular.module('app', []);
app.controller('maximController', ['$scope', '$http', maximController]);
function maximController($scope, $http) {
$scope.loading = true;
$scope.addMode = false;
$scope.toggleEdit = function () {
this.maxim.editStatus = !this.maxim.editStatus;
};
$scope.toggleAdd = function () {
$scope.addMode = !$scope.addMode;
};
// 출력
$http.get('/api/maximservice/').success(function (data) {
$scope.maxims = data;
$scope.loading = false;
})
.error(function () {
$scope.error = "데이터를 가져오는 동안 에러가 발생했습니다. ";
$scope.loading = false;
});
// 입력
$scope.add = function () {
$scope.loading = true;
$http.post('/api/maximservice/', this.newmaxim).success(function (data) {
alert("데이터가 입력되었습니다.");
$scope.addMode = false;
$scope.maxims.push(data);
$scope.loading = false;
}).error(function (data) {
$scope.error = "데이터를 입력하는동안 에러가 발생했습니다. " + data;
$scope.loading = false;
});
};
// 수정
$scope.save = function () {
$scope.loading = true;
var frien = this.maxim;
$http.put('/api/maximservice/' + frien.id, frien).success(function (data) {
alert("데이터가 수정되었습니다.");
frien.editStatus = false;
$scope.loading = false;
}).error(function (data) {
$scope.error = "데이터를 수정하는동안 에러가 발생했습니다. " + data;
$scope.loading = false;
});
};
// 삭제
$scope.deletemaxim = function () {
$scope.loading = true;
var id = this.maxim.id;
$http.delete('/api/maximservice/' + id).success(function (data) {
alert("데이터가 삭제되었습니다.");
$.each($scope.maxims, function (i) {
if ($scope.maxims[i].id === id) {
$scope.maxims.splice(i, 1);
return false;
}
});
$scope.loading = false;
}).error(function (data) {
$scope.error = "데이터를 삭제하는동안 에러가 발생했습니다. " + data;
$scope.loading = false;
});
};
}
})();
</script>
</body>
</html>