AngularJS FormsAngularJS 서식은 입력 제어의 집합입니다.
1. HTML Controls
HTML 입력 요소는 HTML 제어라고 부릅니다:
- input 요소
- select 요소
- button 요소
- textarea 요소
2. HTML Forms
HTML 서식은 HTML 제어가 함께있는 그룹입니다.
3. Application Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div ng-app="" ng-controller="formController"> <form novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>form = {{user }}</p> <p>master = {{master}}</p> </div> <script> function formController ($scope) { $scope.master = {firstName:"John", lastName:"Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); } </script> </body> </html> | cs |
* novalidate 속성은 HTML5의 새로운 속성입니다. 이 속성은 어떤 기본 브라우저 검사도 사용하지 않게 합니다.
ng-model은 두 개의 입력 요소를 모델의 사용자 객체로 연결합니다.
formController() 함수는 초기 값을 마스터 객체로 설정하고, reset() 메소드를 호출합니다.
reset() 메소드는 사용자 객체를 마스터 객체와 똑같이 설정합니다.
ng-click은 reset() 메소드를 호출합니다.
* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.
