AngularJS에서 CRUD 구현하기 #2

지난 글에 이어 오늘은 Create를 구현해보자. 

우선 데이터를 받아와 저장할 수 있는 board의 포맷이 필요하다.

 

$scope.boardForm = {};

<script> 태그 내부에 boardForm이라는 변수를 만들어준다. 이 변수는 $scope 객체에서 JSON 변수로 저장된다.

 

<form ng-submit="insert()">
	<table>
		<tr>
			<td>Title : </td>
			<td><input type="text" ng-model="boardForm.title"></td>
		</tr>
		<tr>
			<td>Name :</td>
			<td><input type="text" ng-model="boardForm.name"></td>
		</tr>
		<tr>
			<button type="submit">Add</button>
		</tr>
	</table>
</form>

1. 게시판 <table> 태그 위에 이렇게 <form> 태그를 배치하고 내부에 table을 만들어준다.
2. Title과 Name을 입력 받을 수 있는 input을 만들어 boardForm이라는 형식으로 저장한다.
3. submit 버튼을 통해 insert 함수가 실행되게 한다.

$scope.insert = function() {
	
	var newId;
	
	if(! $scope.boardlist.length) {
		newId = 1;
	}else {
		newId = $scope.boardlist[$scope.boardlist.length - 1].id + 1;
	}
	
	var newItem = {
		id : newId, title : $scope.boardForm.title, writer : $scope.boardForm.writer
	};
	
	$scope.boardlist.push(newItem); //배열에 요소 추가
	
}

1. 배열의 길이의 유무를 판단하여 배열의 길이가 있으면 끝값의 id+1을, 없으면 1을 newId에 저장한다.
2. JSON형태의 newItem을 만들어 newId와 input에서 받은 title, writer을 저장한다.
3. JSON 배열인 boardlist에 newItem을 추가한다.

 

Title과 Name을 채우고 Submit을 누르면 게시판에 즉시 등록이 되는 것을 알 수 있다.

이렇게 CRUD 중 Create, Read, Delete가 완성되었다.