文档章节

AngularJs——双向数据绑定示例

孟飞阳
 孟飞阳
发布于 2016/12/11 09:18
字数 369
阅读 21
收藏 0

我们在页面中加入一个表单:

 

<span style="font-size:10px;"><!DOCTYPE html>  
<html ng-app="userInfoModule">  
<head>  
<meta name="content-type" content="text/html; charset=UTF-8">  
<script src="angular-1.5.0/angular.min.js"></script>  
<script src="js/Forms.js"></script>  
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">  
<script>  
   
</script>  
</head>  
   
<body>  
 <div class="panel panel-primary">  
   <div class="panel-heading">  
     <div class="panel-title">  
       Two-way Binding demo  
     </div>  
   </div>  
   <div class="panle-body">  
       <div class="row">  
         <div class="col-md-12">  
           <form  class="form-horizontal" role="form" ng-controller="userInfoControl">  
             <div class="form-group">  
               <label class="col-md-2 control-label">  
                 email-address:  
               </label>  
               <div class="col-md-10">  
                 <input type="email" class="form-control" placeholder="please input you email-address" ng-model="userInfo.email">  
               </div>  
             </div>  
             <div class="from-group">  
               <label  class="col-md-2 control-label">  
                 password:  
               </label>  
               <div class="col-md-10">  
                 <input type="password" class="form-control" placeholder="please input your password" 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">login auto  
                   </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()">  
                   get form data  
                 </button>  
                 <button class="btn btn-default" ng-click="setFormData()">  
                   set form data  
                 </button>  
                  <button class="btn btn-default" ng-click="resetFormData()">  
                   reset form data  
                 </button>  
               </div>  
             </div>  
           </form>  
         </div>  
       </div>  
   </div>  
</div>  
</body>  
</html>  
</span>

 之后,定义模块跟controller,并在controller中绑定我们的model跟事件。

var userInfoModule=angular.module('userInfoModule',[]); /*定义模块*/ 
userInfoModule.controller('userInfoControl',['$scope',function($scope){/*定义Controller,并注入对象*/ 
    $scope.userInfo={ /*初始化数据*/ 
        email:"liuhuichao1128@163.com",  
        password:"1112345",  
        autoLogin:true 
    };  
    $scope.getFormData=function(){ /*获取模型数据*/ 
        console.log($scope.userInfo);  
    };  
    $scope.setFormData=function(){/*设置数据*/ 
        $scope.userInfo={  
            email:"2523579001@163.com",  
            password:"000000000000",  
            autoLogin:true 
        };  
    };  
    $scope.resetFormData=function(){/*重置数据*/ 
        $scope.userInfo={  
            email:"liuhuichao1128@163.com",  
            password:"1112345",  
            autoLogin:true 
        };  
    };  
}]);

 

 代码解析:




      用完之后,最大的感觉就是,DOM操作少了,数据双向绑定后,页面上表单改变值,也不用再重新取值,非常方便。

本文转载自:http://www.2cto.com/kf/201602/490325.html

共有 人打赏支持
孟飞阳
粉丝 204
博文 954
码字总数 540957
作品 5
朝阳
个人站长
第217天:深入理解Angular双向数据绑定的原理

一、理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理。angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成。 那么什么是双向绑定,下面...

半指温柔乐
04/10
0
0
Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题。 1.1数据从html流向controller 也就是从视...

大史不说话
07/17
0
0
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名
2011/01/20
0
44
第214天:Angular 基础概念

一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开...

半指温柔乐
04/04
0
0
angular js 自学笔记(一)

js中的mvc mvc设计模式,简单说来是将复杂的代码设计规范化,把应用的输入,处理,输出分开,M是指数据模型,V是指用户界面,C则是控制器。像我刚接触的SSH框架中,例如struts,就是利用mvc的...

烽穹寒渊
2015/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

阿里云国际版香港CN2测评 月付9美元/30M带宽/1T流量

市面上很多家香港VPS服务商,一直都说阿里云国际版香港CN2线路好,延迟低,速度快,价格便宜流量还多,那么这个香港线路到底怎么样呢?本文从性能、延时、路由、速度方面来全方面测评一下阿里...

flyzy2005
48分钟前
0
0
撤销git commit --amend

it commit -amend之后想撤销 git reset HEAD@{1}

xiaomge
53分钟前
0
0
有意思的TimeUnit

java.util.concurrent.TimeUnit 这个类,相信童鞋们都不陌生。它是一个enum: public enum TimeUnit 好吧,我一直把它当做一个枚举类来用。偶然看到还有别的用法,大吃一斤,原来 TimeUnit 并...

polly
今天
9
0
生成pyc

Python生成pyc文件 pyc文件是py文件编译后生成的字节码文件(byte code)。pyc文件经过python解释器最终会生成机器码运行。所以pyc文件是可以跨平台部署的,类似Java的.class文件。一般py文件改...

Mr_Tea伯奕
今天
0
0
180815-Spring之RestTemplate中级使用篇

Spring之RestTemplate中级使用篇 前面一篇介绍了如何使用RestTemplate发起post和get请求,然而也只能满足一些基本的场景,对于一些特殊的如需要设置请求头,添加认证信息等场景,却没有提及可...

小灰灰Blog
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部