ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • AngularJS Forms
    개발 이야기/개발 및 서비스 2014. 8. 1. 12:09
    반응형

    http://tutorials.jenkov.com/angularjs/forms.html


    AngularJS From을 사용하는 방법


    AngularJS는 model object($scope)에 HTML form의 input 필드의 데이타를 연동하는 몇가지 기능들이 있다. 이런 기능들은 form에 대한 작업을 더 쉽게 도와주니까 함 보자. 


    ng-model 지시어를 사용해서 모델속성을 input filed에 연결하는 것은 아래와 같이 할 수 있다.

    <input type="text" id="firstName" ng-model="myForm.firstName">

    데이타는 두가지 방식으로 연동이 되는데, controller 함수에 해당하는 안쪽에서 $scope.myForm.firstName값을 수정하던가, text field에 직접 값을 넣던가 하면 된다.


    아래는 제대로 작동하는 전체 샘플 코드다.

    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    </head>
    
    <body ng-app="myapp">
    
    <div ng-controller="MyController" >
        <form>
            <input type="text" name="firstName" ng-model="myForm.firstName"> First name <br/>
            <input type="text" name="lastName"  ng-model="myForm.lastName"> Last name <br/>
        </form>
    
        <div>
            {} {}
        </div>
    </div>
    
    <script>
        angular.module("myapp", [])
                .controller("MyController", function($scope) {
                    $scope.myForm = {};
                    $scope.myForm.firstName = "Jakob";
                    $scope.myForm.lastName  = "Jenkov";
                } );
    </script>
    
    </body>
    </html>

    이 예제는 $scope.myForm.firstName과 $scope.myForm.lastName 속성을 두개의 input fields에 연동한다. (위 글 재설명이라 생략. 원본 참고)


    이 예제는 또한 두개의 삽입 지시자( {{ }} )를 사용하고 있다. 이 두개는 myForm.firstName과 myForm.lastName의 값을 form 필드 아래에 출력된다. 만약 text field에 뭔가를 입력하면 이 값은 각 속성값으로 복사되고, 위 두개의 삽입 지시자를 그 정보를 확인해서 업데이트 할 것이다.


    (나머지 radio, select, checkbox도 유사하니 생략)


    ng-options


    (일단 필요한건 위 내용이라.. 나머진 나중에... ^^a)




     



    반응형

    댓글 0

Designed by Tistory.