Anglejs 연구 노트의 양방향 데이터 바인딩
- 高洛峰원래의
- 2016-12-24 10:07:261397검색
이번에는 Angle의 양방향 데이터 바인딩에 대해 자세히 설명하겠습니다.
1. 간단한 예
이미 첫 번째 섹션에서 이 예를 확인하려면 여기로 이동하세요.
여기에서 얻은 효과는 입력 상자에 Enter를 입력하는 것입니다. 내용 및 해당 내용이 그에 따라 변경됩니다. 이는 양방향 데이터 바인딩을 달성합니다.
2. 값 표현식 및 ng-bind 사용
기사에 나오는 첫 번째 예에서는 여기를 클릭하여 {{greeting.text}} 및 { {text}}는 값 표현인데 계속해서 페이지를 새로고침하다 보면 문제가 발견됩니다. 즉, 페이지가 가끔 나타나는 경우가 있습니다. "{{greeting.text}} {{text}}" "이 문자열은 어떻게 우리가 해결해야 해?
여기서는 ng-bind 명령이 사용됩니다. 데이터 표현식을 바인딩하는 데 사용됩니다.
예를 들어
<p>{{greeting.text}} {{text}}</p>
을
"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>";
으로 변경할 수 있습니다.
이 수정 후에는 페이지를 새로 고칠 때 원치 않는 문자열이 나타나지 않습니다.
그러나 명령을 사용하는 것은 표현식을 직접 사용하는 것보다 항상 효율성이 떨어지므로 일반적인 규칙을 요약했습니다. 일반적으로 인덱스에는 ng-bind를 사용하고 후속 템플릿 형식에서는 '{{}}'를 사용합니다. .
3. 일반적인 양방향 바인딩 시나리오 - 양식
먼저 form.html의 내용을 살펴보겠습니다.
<!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 내용을 보면
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의 내용을 살펴보세요.
<!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의 내용을 다시 살펴보겠습니다.
var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
function($scope) {
$scope.color = "red";
$scope.setGreen = function() {
$scope.color = "green";
}
}
])
속성의 기본값은 " color"는 "red"”이므로 빨간색으로 표시되며, 클릭하면 기능이 실행되어 녹색으로 변합니다.
더 많은 Anglejs 연구 노트와 양방향 데이터 바인딩 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!