Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 12. 서식(Forms) - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 12. 서식(Forms) - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:28
728x90

AngularJS Forms

AngularJS 서식은 입력 제어의 집합입니다.

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 를 참고하여 작성하였습니다.


728x90
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 14. Bootstrap- Angular JS 강좌  (0) 2016.06.14
[AngularJS] 13. 검사(Validations) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 11. 모듈(module) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 10. HTML Event - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 9. HTML DOM - Angular JS 강좌  (0) 2016.06.14
'AngularJS_1' Related Articles more