테스트 사이트 - 개발 중인 베타 버전입니다

AngularJS 양식

· 8년 전 · 999
AngularJS 양식

AngularJS의 양식은 입력 컨트롤의 데이터 바인딩 및 유효성 검사를 제공합니다.

입력 컨트롤
입력 컨트롤은 HTML 입력 요소입니다.

1. 입력 요소
2. 요소 선택
3. 버튼 요소
4. 텍스트 영역 요소


데이터 바인딩

입력 컨트롤은 ng-model지시문 을 사용하여 데이터 바인딩을 제공합니다 .

<input type="text" ng-model="firstname">
응용 프로그램에 이제 명명 된 속성이 firstname있습니다.

이 ng-model지시문은 입력 컨트롤러를 나머지 응용 프로그램에 바인딩합니다.

이 속성 firstname은 컨트롤러에서 참조 할 수 있습니다.


<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
</script>
[전체소스]
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
</script>

</body>
</html>



또한 응용 프로그램의 다른 곳에서도 참조 할 수 있습니다.


<form>
First Name: <input type="text" ng-model="firstname">
</form>

<h1>You entered: {{firstname}}</h1>

[전체소스]
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>

<p>Change the name inside the input field, and you will see the name in the header changes accordingly.</p>

</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1418
부트스트랩 애니메이션 경고
1417
부트스트랩 경고 닫기
1416
부트스트랩 알림 링크
1414
1413
1412
1411
1410
부트스트랩 이미지 갤러리
1409
부트스트랩 반응 형 이미지
1408
1407
1406
1405
부트스트랩 반응 형 테이블
1404
부트스트랩 문맥 분류
1403
부트스트랩 요약 표
1402
부트스트랩 호버 행
1401
부트스트랩 테두리가있는 표
1400
1399
1398
1397
1396
1395
1394
부트스트랩 <blockquote>
1393
부트스트랩 <abbr>
1392
부트스트랩 <mark>
1391
부트스트랩 <small>
1390
1389
1388
부트스트랩 3 개의 동일한 열