실제로 AngularJS 양식 배우기_AngularJS

폼은 가장 일반적으로 사용되는 컴포넌트입니다. Angular.js에서는 폼에만 추가되는 특수 기능이 많지 않습니다. 하지만 Angular.js 프레임워크 자체의 특성을 이용하면 좀 더 친숙한 방식으로 형태를 표현할 수 있습니다. 다음은 일반적으로 사용되는 여러 기능이 Angular에서 어떻게 영리하게 구현되는지 소개합니다.

1. 입력 도메인 데이터를 기반으로 실시간으로 출력 데이터를 업데이트합니다

다음 코드는 사용자가 입력한 데이터를 처리하여 양식 출력 필드에 실시간으로 표시할 수 있는 간단한 계산 양식을 구현합니다.

<div ng-app="" ng-init="quantity=1;price=5"> 
数量： <input type="number" ng-model="quantity"> 
价格： <input type="number" ng-model="price"> 
<p><b>总价：</b> {{ quantity * price }}</p> 
</div> 

두 개의 ng-model을 정의함으로써 사용자가 입력하는 데이터를 실시간으로 모니터링하고, {{}}를 사용하여 데이터를 호출하며, 코드 몇 줄만으로 제안된 계산 양식 함수가 완성됩니다.

2. 양식 재설정 기능 구현

다음 코드는 양식에서 자주 사용되는 기능인 양식 재설정을 구현합니다.

HTML 코드:

<div ng-app="myApp" ng-controller="formCtrl"> 
<form> 
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> 
</div> 

JS 코드:

var app = angular.module('myApp', []); 
app.controller('formCtrl', function($scope) { 
$scope.master = {firstName: "John", lastName: "Doe"}; 
$scope.reset = function() { 
$scope.user = angular.copy($scope.master); 
}; 
$scope.reset(); 
}); 

JS 컨트롤러 코드에서는 초기 순간에 양식 입력 상자의 값을 저장하기 위해 마스터 개체를 정의합니다. 우리는 메소드가 실행된 후angular.copy 메소드를 사용하여 마스터의 값을 사용자에게 할당합니다. 이 메소드는 양식 필드를 재설정하는 데 사용됩니다. HTML 코드에서는 ng-click 마우스 클릭 이벤트를 사용하여 함수를 구현하는 재설정() 함수를 트리거합니다.

3. 양식 드롭다운 메뉴 선택 필드 기능 구현

Angular에서는 드롭다운 메뉴를 구현하는 것이 간단합니다. ng-repeat 지시문을 사용하여 드롭다운 메뉴를 쉽게 구현할 수 있습니다:

먼저 js 모델에서 데이터를 정의합니다. 데이터 형식은 다음과 같습니다.

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
$scope.names = ["Google", "Runoob", "Taobao"]; 
}); 

그런 다음 ng-repeat를 사용하여 모델의 데이터를 HTML로 읽습니다(구체적인 의미는 이전 블로그 참조)

<div ng-app="myApp" ng-controller="myCtrl"> 
<select ng-model="selectedName" ng-options="x for x in names"> 
</select> 
</div> 

드롭다운 메뉴의 경우 데이터베이스, 원격 등에서 데이터를 읽는 것도 포함됩니다. 또한 드롭다운 메뉴를 구현하는 다른 방법도 있습니다. 이에 대해서는 나중에 논의하겠습니다.