AngularJS에서 angular.copy() 함수를 사용하여 폼의 reset 기능을 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다.
<div ng-app="myApp" ng-controller="myCtrl">
컨트롤러에 다음과 같이 resetUser를 정의해 두고 reset() 함수를 만든다. reset() 함수에서는 angular.copy() 함수를 사용하여 resetUser를 currUser에 복사한다. AngularJS 가 처음 시작할 때 $scope.reset(); 로 한번 호출되어 currUser에는 resetUser가 복사되어 있다.
app.controller('myCtrl', function($scope) {
$scope.resetUser = {
firstName : "HanGil",
lastName : "Joo"
};
$scope.reset = function() {
$scope.currUser = angular.copy($scope.resetUser);
};
$scope.reset();
});
ng-model 속성의 값으로 currUser의 필드를 사용하여 값을 표시한다.
<input type="text" ng-model="currUser.lastName">
<input type="text" ng-model="currUser.firstName">
버튼을 클릭하면 reset() 함수가 실행되어 resetUser의 값이 다시 currUser로 복사가 되어 초기값이 화면에 표시된다.
<button ng-click="reset()">Reset</button>
예제의 전체코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.resetUser = {
firstName : "HanGil",
lastName : "Joo"
};
$scope.reset = function() {
$scope.currUser = angular.copy($scope.resetUser);
};
$scope.reset();
});
</script>
</head>
<body>
<h2>Form reset</h2>
<div ng-app="myApp" ng-controller="myCtrl">
<form novalidate>
Last Name : <input type="text" ng-model="currUser.lastName"><br>
First Name : <input type="text" ng-model="currUser.firstName"><br> <br>
<button ng-click="reset()">Reset</button>
</form>
<p>currUser = {{currUser}}</p>
<p>resetUser = {{resetUser}}</p>
</div>
<hr>
</body>
</html>
아래와 같이 화면에 표시된다.
임력항목의 값을 바꾸면 Current 값이 변경된다.
Reset 버튼을 클릭하면 초기의 값으로 표시된다.
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] 헤더를 클릭하여 테이블에 출력한 데이터를 정렬 (0) | 2023.02.22 |
|---|---|
| [AngularJS] 폼 입력항목 AngularJS의 유효성검사 (0) | 2023.02.22 |
| [AngularJS] ng-show, ng-hide 속성으로 화면요소를 보이기/감추기 (0) | 2023.02.22 |
| [AngularJS] ng-disabled 속성으로 버튼을 활성화/비활성화 (0) | 2023.02.22 |
| [AngularJS] $http 서비스로 받아온 데이터에 필터를 적용해보자. (0) | 2023.02.22 |
댓글