angularjs 에서 폼전송
본문
흠.... 브라우져 호환성 때문에 사용을 하지 않으려고 했는데...
하이브리드 앱 작업이 들어가면서 어쩔수 없이 다시 잡게 되었습니다.
angularjs에서 form전송이 일반 적이지 않고 따로 무슨처리를 해야 하는것 같네요.
ajax처리 없이 일반 적인 방법인 form->post->처리페이지->처리 이런식으로 처리 하기 위한 옵션이 따로 존재 하는지요?
답변 2
어라라.....
되네요.....
아.. kcp박아놓고 작업 하다 그쪽에서 정지 됬었나보네요 ㅎㅎ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>앵귤러</title>
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/angular.min.js"></script>
<script type="text/javascript">
function testApp($scope) {
$scope.Title = 'Angular 폼전송에 대한 테스트';
}
function FormApp($scope) {
$scope.name = 'Jone';
$scope.ck_name = function() {
return '>'+$scope.name+'<';
}
}
function ArrayTest($scope) {
$scope.data = new Array();
$scope.data['test'] = 'test';
$scope.data['text'] = 'text';
// jsone data
$scope.XData = [
{'wow':'1wow', 'foo':'1foo'},
{'wow':'2wow', 'foo':'2foo'},
{'wow':'3wow', 'foo':'3foo'},
{'wow':'4wow', 'foo':'4foo'},
{'wow':'5wow', 'foo':'5foo'},
{'wow':'6wow', 'foo':'6foo'}]
}
</script>
</head>
<body ng-app="" ng-controller="testApp">
<!-- 객체에 bind { -->
<h1 data-ng-bind="Title">__TITLE__</h1>
<!-- } 객체에 bind -->
<hr>
<!-- form test { -->
<form action="./upload.php" method="post" ng-controller="FormApp">
<input type="text" name="name" ng-model="name">
이름이 <span>{{ck_name()}}</span>이 맞나요?
<input type="submit" value="submit">
</form>
<!-- } form test -->
<hr>
<!-- 더하기 { -->
<div>난 혼자 놀꺼야.. {{5+5}}</div>
<!-- } 더하기 -->
<hr>
<!-- 문자열 더하기 { -->
<div>난 혼자 놀꺼야.. {{5+""+5}}</div>
<!-- } 문자열 더하기 -->
<hr>
<!-- array test { -->
<div ng-controller="ArrayTest">
<div>{{data}}</div>
<div>{{data.test}}</div>
<div>{{data.text}}</div>
<ul>
<li ng-repeat="x in XData">
wow: {{x.wow}} || foo: {{x.foo}}
</li>
</ul>
</div>
<!-- } array test -->
<!-- import test { -->
<div ng-include="'import.html'">__IMPORT__</div>
<!-- } import test -->
</body>
</html>
하이브리드용으로 사용시 최고일것으로보이네요.
http://mobileangularui.com/
이거랑 원본하고 고민중이네요 ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.
