AngularJS的双向数据绑定

最新推荐文章于 2023-06-08 10:58:23 发布

bboyjoe

最新推荐文章于 2023-06-08 10:58:23 发布

阅读量1.2k

点赞数

分类专栏： AngularJS 文章标签：前端框架 Angular.js

本文链接：https://blog.csdn.net/bboyjoe/article/details/48215931

版权

AngularJS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在Angular网页应用中，数据绑定是数据模型(model)与视图(view)组件的自动同步。Angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时，视图就能反映这种改变，反之亦然。

Angular模板的工作方式与大多数只能单向数据绑定的模板差别体现在：其一，模板（指未经编译的附加了标记和指令的HTML）是在浏览器中编译的。其二，编译阶段生成了动态(live)视图。保持视图动态的原因是，任何视图中的改变都会立刻反映到数据模型中去，任何数据模型的改变都会传播到视图中去。这使得数据模型始终是应用的单一数据源。大幅度简化了开发者的编程核心，你可以将视图简单的理解为数据模型的实时映射。

因此，将视图作为数据模型的一种映射，使得控制器完全与视图分离，而不必关心视图的展现。这使测试变得小菜一碟，你可以在没有视图和有关DOM/浏览器的依赖情况下轻松测试你的应用。

双向数据绑定示例：表单

<!DOCTYPE html>
<html lang="zh_CN" ng-app="UserInfoModule">
<head>
    <meta charset="UTF-8">
    <title>AngularJs的双向数据绑定</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/angular.min.js"></script>
    <script src="js/form.js"></script>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-title">双向数据绑定</div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
                        <div class="form-group">
                            <label class="col-md-2 control-label">邮箱：</label>
                            <div class="col-md-10">
                                <input type="email" class="form-control" placeholder="建议使用网易邮箱" ng-model="userInfo.email"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">密码：</label>
                            <div class="col-md-10">
                                <input type="password" class="form-control" placeholder="6~16位的数字、字母和下划线" ng-model="userInfo.password"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="userInfo.autoLogin"/>自动登录
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div 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()">重置Form表单的值</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

/*form.js代码*/

//绑定Module
var userInfoModule=angular.module('UserInfoModule',[]);
//建立controller
userInfoModule.controller('UserInfoCtrl',['$scope',function($scope){
    //设置表单的初始化值
    $scope.userInfo={
        email:"93649812@163.com",
        password:"93649812",
        autoLogin:true
    }
    //获取表单的值
    $scope.getFormData=function(){
        console.log($scope.userInfo);
    }
    //设置表单的值
    $scope.setFormData=function(){
        $scope.userInfo={
            email:"bboyjoe05@163.com",
            password:"bboyjoe",
            autoLogin:false
        }
    }
    //重置表单的值
    $scope.resetForm=function(){
        $scope.userInfo={
            email:"93649812@163.com",
            password:"93649812",
            autoLogin:true
        }
    }


}])

bboyjoe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS的双向数据绑定

在Angular网页应用中，数据绑定是数据模型(model)与视图(view)组件的自动同步。Angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时，视图就能反映这种改变，反之亦然。Angular模板的工作方式与大多数只能单向数据绑定的模板差别体现在：其一，模板（指未经编译的附加了标记和指令的HTML）是在浏览器中编译的。其
复制链接

扫一扫