AngularJs——双向数据绑定示例

简介:        最近在做Hybird App,接触到了AngularJs,感觉用起来蛮爽的,今天share下AngularJs的核心功能之一:双向数据绑定。       我们在页面中加入一个表单:     Two...



       最近在做Hybird App,接触到了AngularJs,感觉用起来蛮爽的,今天share下AngularJs的核心功能之一:双向数据绑定。


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


    



<!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>


     之后,定义模块跟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操作少了,数据双向绑定后,页面上表单改变值,也不用再重新取值,非常方便。




目录
相关文章
|
6月前
|
JavaScript 前端开发 开发者
深入探索AngularJS的双向数据绑定机制
【4月更文挑战第27天】本文深入探讨AngularJS的双向数据绑定机制,该机制通过脏检查和插值表达式自动处理视图与模型的同步,简化开发。优点在于简化数据同步,提供实时用户体验,但可能引发性能问题和数据污染。文章通过示例解释了如何使用`ng-model`和插值表达式实现绑定,并提醒开发者注意潜在挑战。理解这一机制有助于构建更高效的应用。
|
6月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
6月前
|
前端开发 JavaScript 开发者
详细介绍 AngularJS 表单的各种特性、用法和最佳实践
详细介绍 AngularJS 表单的各种特性、用法和最佳实践
111 1
|
JavaScript
【笔记】AngularJs学习笔记[01] 数据绑定
【笔记】AngularJs学习笔记[01] 数据绑定
115 0
【笔记】AngularJs学习笔记[01] 数据绑定
|
JavaScript
Angular4总结(四)—— 数据绑定,响应式,管道
数据绑定 angular4中默认的数据绑定都是单向的。可分为: 插值表达式形式(Dom属性绑定) <p>{{test}}<p> Dom 属性绑定流程: 控制器中定义了一个属性,值发生了改变 对应的dom的value被附上改变了的值 渲染后的页面上也会出现刚刚的值 这一切操作都和html属性不发生任何关系 html属性绑定,使用中括号 <img [src]="imgUrl"/> //如果没有写这个方括号,angular会把属性右侧的值作为字符串进行赋值,而非表达式 基本Html属性绑定 CSS属性绑定 这种形式是全有或者全无的。
1401 0
|
Web App开发 JavaScript
Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定
### 一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题。 #### 1.
1390 0
|
前端开发 JavaScript 开发者
Angularjs进阶笔记(2)-自定义指令中的数据绑定
有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题。 一. 自定义指令 自定义指令,是Angularjs用来实现组件化的方式,相比于React和Vue的组件化方式,它真的很复杂,自定义指令太重了,它暴露了太多可供定制的参数,以至于普通的开发者完全不知道要用它来做什么而将其束之高阁,毕竟一般的业务逻辑通过controller和service就已经可以完成了。
1187 0
|
Web App开发 JavaScript 前端开发
第217天:深入理解Angular双向数据绑定的原理
一、理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理。angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成。 那么什么是双向绑定,下面简单进行讲解。
4043 0
|
JavaScript
AngularJs-03-数据的双向绑定
<!DOCTYPE html> <html lang="zh" ng-app="myapp"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.
1215 0