이번에는 Angle의 양방향 데이터 바인딩에 대해 자세히 설명하겠습니다.
1. 간단한 예
이미 첫 번째 섹션에서 이 예를 확인하려면 여기로 이동하세요.
여기에서 얻은 효과는 입력 상자에 Enter를 입력하는 것입니다. 내용 및 해당 내용이 그에 따라 변경됩니다. 이는 양방향 데이터 바인딩을 달성합니다.
2. 값 표현식 및 ng-bind 사용
기사에 나오는 첫 번째 예에서는 여기를 클릭하여 {{greeting.text}} 및 { {text}}는 값 표현인데 계속해서 페이지를 새로고침하다 보면 문제가 발견됩니다. 즉, 페이지가 가끔 나타나는 경우가 있습니다. "{{greeting.text}} {{text}}" "이 문자열은 어떻게 우리가 해결해야 해?
여기서는 ng-bind 명령이 사용됩니다. 데이터 표현식을 바인딩하는 데 사용됩니다.
예를 들어
1 | <p>{{greeting.text}} {{text}}</p>
|
로그인 후 복사
을
1 | "<p><span ng-bind=" greeting.text "></span><span ng-bind=" text "></span></p>" ;
|
로그인 후 복사
으로 변경할 수 있습니다.
이 수정 후에는 페이지를 새로 고칠 때 원치 않는 문자열이 나타나지 않습니다.
그러나 명령을 사용하는 것은 표현식을 직접 사용하는 것보다 항상 효율성이 떨어지므로 일반적인 규칙을 요약했습니다. 일반적으로 인덱스에는 ng-bind를 사용하고 후속 템플릿 형식에서는 '{{}}'를 사용합니다. .
3. 일반적인 양방향 바인딩 시나리오 - 양식
먼저 form.html의 내용을 살펴보겠습니다.
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!doctype html>
<html ng-app= "UserInfoModule" >
<head>
<meta charset= "utf-8" >
<link rel= "stylesheet" href= "css/bootstrap-3.0.0/css/bootstrap.css" >
<script src= "js/angular-1.3.0.js" ></script>
<script src= "Form.js" ></script>
</head>
<body>
<p class = "panel panel-primary" >
<p class = "panel-heading" >
<p class = "panel-title" >双向数据绑定</p>
</p>
<p class = "panel-body" >
<p class = "row" >
<p class = "col-md-12" >
<form class = "form-horizontal" role= "form" ng-controller= "UserInfoCtrl" >
<p class = "form-group" >
<label class = "col-md-2 control-label" >
邮箱:
</label>
<p class = "col-md-10" >
<input type= "email" class = "form-control" placeholder= "推荐使用126邮箱" ng-model= "userInfo.email" >
</p>
</p>
<p class = "form-group" >
<label class = "col-md-2 control-label" >
密码:
</label>
<p class = "col-md-10" >
<input type= "password" class = "form-control" placeholder= "只能是数字、字母、下划线" ng-model= "userInfo.password" >
</p>
</p>
<p class = "form-group" >
<p class = "col-md-offset-2 col-md-10" >
<p class = "checkbox" >
<label>
<input type= "checkbox" ng-model= "userInfo.autoLogin" >自动登录
</label>
</p>
</p>
</p>
<p class = "form-group" >
<p class = "col-md-offset-2 col-md-10" >
<button class = "btn btn-default" ng-click= "getFormData()" >获取Form表单的值</button>
<button class = "btn btn-default" ng-click= "setFormData()" >设置Form表单的值</button>
<button class = "btn btn-default" ng-click= "resetForm()" >重置表单</button>
</p>
</p>
</form>
</p>
</p>
</p>
</p>
</body>
</html>
|
로그인 후 복사
Form.js 내용을 보면
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 | var userInfoModule = angular.module('UserInfoModule', []);
userInfoModule.controller('UserInfoCtrl', [' $scope ',
function ( $scope ) {
$scope .userInfo = {
email: "253445528@qq.com" ,
password: "253445528" ,
autoLogin: true
};
$scope .getFormData = function () {
console.log( $scope .userInfo);
};
$scope .setFormData = function () {
$scope .userInfo = {
email: 'testtest@126.com',
password: 'testtest',
autoLogin: false
}
};
$scope .resetForm = function () {
$scope .userInfo = {
email: "253445528@qq.com" ,
password: "253445528" ,
autoLogin: true
};
}
}
])
|
로그인 후 복사
위 그림에 구현된 함수는 다음과 같습니다.
1. "Get"을 클릭하여 3개를 출력합니다. 콘솔의 데이터, 이메일, 비밀번호 및 선택한 상태(true, false)
2. "설정"을 클릭합니다. 두 입력 상자의 값과 확인란의 선택 취소 상태를 변경할 수 있습니다.
3. "재설정"을 클릭하세요. 데이터를 원래 데이터로 복원할 수 있습니다.
입력 상자의 ng-model과 컨트롤러의 값은 양방향 바인딩을 구현하므로 입력 상자의 값을 변경하거나 컨트롤러의 값을 변경하면 양쪽의 값이 변경됩니다. 따라서. 단 몇 줄의 코드만으로 이렇게 강력한 기능을 구현할 수 있다는 것이 놀랍지 않나요? 정말 놀랍습니다. 하지만 더 놀라운 것은 아직 오지 않았습니다! 계속하세요!
4. 동적으로 라벨 스타일 전환
먼저 color.html의 내용을 살펴보세요.
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 | <!doctype html>
<html ng-app= "MyCSSModule" >
<head>
<meta charset= "utf-8" >
<link rel= "stylesheet" href= "CSS1.css" >
</head>
<style type= "text/css" >
.text-red {
background-color: #ff0000;
}
.text-green {
background-color: #00ff00;
}
</style>
<body>
<p ng-controller= "CSSCtrl" >
<p class = "text-{{color}}" >测试CSS样式</p>
<button class = "btn btn-default" ng-click= "setGreen()" >绿色</button>
</p>
</body>
<script src= "js/angular-1.3.0.js" ></script>
<script src= "color.js" ></script>
</html>
|
로그인 후 복사
19번째 줄을 보겠습니다. p 태그에 "color" 변수가 있습니다. "green"을 클릭하면 setGreen 함수가 실행되어 "color" 값이 "green"으로 변경되므로 클래스 이름이 변경되어 배경색이 변경되었습니다. 이 방법을 사용하면 요소를 직접 조작할 필요 없이 변수만 추가하면 됩니다. 코드가 간결하고 직관적입니다.
color.js의 내용을 다시 살펴보겠습니다.
1 2 3 4 5 6 7 8 9 | var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', [' $scope ',
function ( $scope ) {
$scope .color = "red" ;
$scope .setGreen = function () {
$scope .color = "green" ;
}
}
])
|
로그인 후 복사
속성의 기본값은 " color"는 "red"”이므로 빨간색으로 표시되며, 클릭하면 기능이 실행되어 녹색으로 변합니다.
더 많은 Anglejs 연구 노트와 양방향 데이터 바인딩 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!