[AngularJS] 폼에서 - 이슈칼럼

AngularJS에서 angle.copy() 함수로 폼의 리셋 함수를 구현합니다.
AngularJS를 사용하는 방법: 스크립트 태그에 AngularJS CDN을 추가합니다.

<스크립트 원천=“http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js“>스크립트>

'추천 관련글,

div 태그에서 ng-app 속성을 만들고 “myApp”으로 정의하고 ng-controller 속성을 만들고 “myCtrl”로 정의합니다.

<다양한 앱=“내 앱” 컨트롤러=“myCtrl”>

다음과 같이 컨트롤러에 resetUser를 정의하고 reset() 함수를 생성합니다.
reset() 함수는 angle.copy() 함수를 사용합니다.
사용자 재설정 currUser에 복사합니다.
AngularJS가 처음 실행될 때 $scope.reset(); 한 번 호출되고 resetUser가 currUser에 복사됩니다.

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 필드를 사용하여 값을 표시합니다.

<기입 유형=“텍스트” 모델=“현재 사용자. 성”>

<기입 유형=“텍스트” 모델=“현재 사용자. 이름”>

버튼을 클릭하면 reset() 함수가 실행되어 resetUser의 값이 다시 currUser에 복사되고 초기값이 화면에 표시됩니다.

<단추 ng 클릭=“기본값()으로 재설정”>기본값으로 재설정단추>

이것은 예제의 전체 코드입니다.

<!
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>

아래와 같이 화면에 나타납니다.

입력 요소의 값을 변경하면 현재 값이 변경됩니다.

재설정 버튼을 클릭하면 초기 값이 표시됩니다.