반응형
250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
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
관리 메뉴

가끔 보자, 하늘.

AngularJS Forms 본문

개발 이야기/개발 및 서비스

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)




 



반응형
저작자표시 비영리 동일조건

'개발 이야기 > 개발 및 서비스' 카테고리의 다른 글

users_assetbundle-demo의 readme  (0) 2015.03.20
unity5에서의 신규 AssetBundle 빌드 시스템  (341) 2015.03.19
nodejs와 couchbase, mysql 연동  (0) 2014.07.16
ruby on rails 시작해보기 - 3  (0) 2014.06.07
ruby on rails 시작해보기 - 2  (31) 2014.05.06
'개발 이야기/개발 및 서비스' Related Articles more