AngularJS 시작하기 튜토리얼 - AngularJS Model

AngularJS 시작하기 튜토리얼 - AngularJS Model_AngularJS

WBOY

풀어 주다： 2016-05-16 15:05:02

원래의

1320명이 탐색했습니다.

관련자료:

AngularJS 입문 튜토리얼 - AngularJS 표현식

AngularJS 입문 튜토리얼 - AngularJS 명령

표현식 및 지시어에 대한 이전 튜토리얼에서 배웠듯이 AngularJS 모델(ng-model)은 HTML 입력 필드의 값을 AngularJS에서 생성된 변수에 바인딩할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="name='Jone Snow'">
名字: <input ng-model="name">
</div>
</body>
</html>

로그인 후 복사

양방향 바인딩 AngularJS의 양방향 바인딩은 ng-model이 HTML의 입력 필드에 바인딩되고 AngularJS의 속성에도 바인딩된다는 의미입니다. 따라서 입력 필드의 값이 변경되면 속성이 변경됩니다. AngularJS의 가치도 바뀔 것입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Snow";
});
</script>
<p>修改输入框的值，标题的名字也会相应修改。</p>
</body>
</html>

로그인 후 복사

애플리케이션 상태 ng-model 지시문은 애플리케이션 데이터에 대한 상태 값을 제공할 수 있습니다

dirty 데이터가 수정된 경우 상태는 TRUE이고, 데이터가 수정되지 않은 경우 FALSE입니다. 원래 값으로 수정해도 TRUE입니다.

유효함수는 입력값이 적법할 경우 TRUE이고, 불법일 경우 FALSE입니다.

touched는 터치 스크린을 클릭하면 TRUE이고, 클릭이 없으면 FALSE입니다.

상태에 따른 CSS 스타일 적용

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
</body>
</html>

로그인 후 복사

입력 필드는 필수 상태를 추가합니다. 입력 필드에 입력이 없으면 ng-model은 입력 필드에 ng-invalid 스타일을 추가합니다. 그렇지 않으면 ng-invalid 스타일을 삭제하세요. ng-model 지시어는 양식 필드의 상태에 따라 다음 스타일을 추가/제거합니다. - ng-empty - ng-not-empty - ng-touched - ng-untouched - ng-valid - ng-invalid - ng-dirty - ng-pending - ng-pristine은 ng-model을 사용하여 이메일 형식을 확인합니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
</body>
</html>

로그인 후 복사

myForm.myAddress.$error.email 속성이 TRUE(이메일 형식이 올바르지 않음)인 경우 ng-show는 표시할 범위 콘텐츠를 제어합니다.

위 내용은 편집자가 소개한 AngularJS 입문 튜토리얼의 AngularJS 모델입니다. 모든 분들께 도움이 되었으면 좋겠습니다!