AngularJS中的双向数据绑定
双向数据绑定
双向数据绑定是指两个方向：从数据模型到视图，从视图到数据模型。AngularJS是一个MVC框架，控制器去修改数据模型，数据模型的变更会反应到视图上。视图上发生了数据的变化，是否能够自动同步到数据模型上呢？
example.html
{{greeting.text}},Angular
app.js
angular.module('helloApp',[])
.controller('helloCtrl',['$scope', function($scope) {
$scope.greeting = {
text : 'hello'
}
}]);运行结果：
但是，使用这种方式进行绑定，当网页刷新过快或者网速不好时，用户有可能看到{{greeting.text}}。AngularJS提供了ng-bind来进行绑定。
将上面的example.html修改如下：
,Angular
这时狂刷页面或者网络不好时，不会出现上述情况。
什么时候使用{{ }}，什么时候使用ng-bind？
AngularJS本身的库在加载完了之后，整个页面都已经归Angular来管了。这时候使用双括号就不会有很大的问题。也就是说，在首页也就是index.html上如果有数据绑定，用ng-bind去绑定。后续的页面可以用双括号{{ }}。
双向数据绑定的场景：form表单
example.html
双向数据绑定
form.js
angular.module('userInfoModule',[])
.controller('userInfoCtrl',['$scope',function($scope){
$scope.userInfo = {
email : "[email protected]",
password : "123456",
autoLogin : true
};
$scope.getFormData = function() {
console.log($scope.userInfo);
}
}])运行结果：
点击“获取form表单的值”按钮，按f12看到控制台输出如下：
当修改了邮箱中的值时， 点击“获取form表单的值”按钮，按f12看到控制台输出如下：
可以看到，视图上的修改会自动同步到数据模型上。
通过程序修改视图的数据，前后对比如下：
重置form表单的值如下：
双向数据绑定的场景：修改css样式
example.html
测试CSS样式
css1.css
@charset "UTF-8";
.text-red {
background-color : #ff0000;
}
.text-green {
background-color : #00ff00;
}css1.js
angular.module('myCssModule',[])
.controller('cssCtrl',['$scope', function($scope) {
$scope.color = "red";
$scope.setGreen = function() {
$scope.color = "green";
}
}])运行结果：
点击按钮：
双向数据绑定的场景：修改css样式——使用ng-class
example.html
{{messageText}}
ngClass.css
@charset "UTF-8";
.error{
background-color : red;
}
.warning {
background-color : yellow;
}ngClass.js
/**
*
*/
angular.module('ngClassModule',[])
.controller('ngClassCtrl',['$scope', function($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function() {
$scope.messageText = "This is an error";
$scope.isError = true;
$scope.isWarning = false;
}
$scope.showWarning = function() {
$scope.messageText = "Just a warning,please carry on";
$scope.isError = false;
$scope.isWarning = true;
}
}])运行结果：
点击Simulate Error按钮：
点击Simulate Warning按钮：
双向数据绑定的场景：控制标签的显示和隐藏ng-show、ng-hide
example.html
- 平局
- 赢
- 输
ngShow.js
/**
*
*/
angular.module('ngShowModule', [])
.controller('ngShowCtrl', ['$scope', function($scope){
$scope.menuState = {
show : false
}
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
}
}])运行结果：
点击按钮：
