前言:

  我们在做前端工作最重要的是把数据能展示给用户看,展示的时候就是把数据绑定给某个元素。

1,简单的数据绑定

html:

<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<title>数据绑定</title>
</head>
<body>
<div ng-controller="myCtl">
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/dataBid.js"></script>
</html>

在上面描述中,{{}} 就是我们实现数据绑定的一个方法,下面把数据给 $scope就可以显示出来了

var myModule = angular.module('MyModule',[]);
myModule.controller('myCtl',function($scope){
$scope.greeting={
text:"hello"
}
})

看效果图

但是,这里有一个问题,当你写完代码按住 F5 狂刷新页面的时候,会发现在数据没有绑定到页面元素的时候,显示的是我们的代码{{greeting.text}}

这不是我们想要的结果,我们可以使用angularjs提供的第二种方法来显示数据绑定,使用 ng-bind属性

    <div ng-controller="myCtl">
<p><span ng-bind="greeting.text"></span>,Angular</p>
</div>

这样显示的时候就不会有代码显示出来了,接着问题来了(要问挖掘机哪家强?),开个玩笑,呵呵,其实差不多,你是你有两种方式绑定,那我们该用哪一种比较好呢?其实,这是要分场景的,使用 ng-bind 是在主html里比较好,而用到 {{}}呢,是放在模板中比较好。

2,双向数据绑定

  什么是双向数据绑定?简单的说就是,数据从后端(指js逻辑这块)展现到前端,从前端也能修改后端的数据。最经典的例子就是form表单提交了。

<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>双向数据绑定</title>
</head>
<body>
<div class="row">
<div class="col-md-5"> <form action="" role="form" class="form-horizontal" ng-controller="formCtl">
<div class="form-group">
<label for="" class="col-md-2 contorl-label">登录名:</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="请输入登录名/邮箱/手机号" ng-model="userInfo.loginUser">
</div>
</div>
<div class="form-group">
<label for="" class="col-md-2 contorl-label">密码:</label>
<div class="col-md-10"><input type="text" class="form-control" placeholder="请输入密码" ng-model="userInfo.pwd"></div>
</div>
<div class="form-group">
<!-- <label for="" class="col-md-2 contorl-label"></label> -->
<div class="col-md-10 col-md-offset-2">
<div class="checkbox">
<label >
<input type="checkbox" ng-model="userInfo.checked">
自动登录
</label> </div> </div>
</div>
<div class="form-group">
<!-- <label for="" class="col-md-2 contorl-label"></label> -->
<div class="col-md-10 col-md-offset-2">
<button id="btnGetFormVal" ng-click="getFormVal()" class="btn btn-primary">获取Form表单的值</button>
<!-- <input type="text" class="form-control" placeholder="" ng-modle=""> --> <button class="btn btn-default" ng-click="setFormVal()">设置Form表单的值</button>
</div>
</div>
</form> </div>
</div>
<script src="js/angular-1.3.0.js"></script>
<script src="js/doubleDataBid.js"></script>
</body>
</html>

看这个代码,我们可以用 ng-model来把后端的数据绑定到前面的 input框内。同时使用 ng-click来调用 $scope所定义的方法,来获取和修改form表单的值

var myModule = angular.module('MyModule',[]);

myModule.controller('formCtl',function($scope){
$scope.userInfo = {
loginUser:"duxg",
pwd:'12345678',
checked:true
} $scope.getFormVal=function(){
console.log($scope.userInfo);
} $scope.setFormVal=function(){
$scope.userInfo={
loginUser:"nijie",
pwd:"1212",
checked:false
}
}
})

在此说明,ng-bind适用于标签元素,而ng-model适用于文本、选择等元素。

3,总结:

  数据绑定这块很简单,我们自己就很常用,就举一个简单的例子吧,我们常用的多条件查询数据,那我们可以把要查询的条件放到一个集合中去,等用户改变那个条件,我们就去修改集合中对应的键值对就好了,然后去调用ajax。是不是一样的道理?

AngularJs-数据绑定的更多相关文章

  1. 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理汇总.如果对文中的题目全部了然于胸,觉得对整个angular框架应该掌握的七七八八了.希望志同道合的通知补充 ...

  2. ng-model,ng-value,ng-bind,{{}}----angularJS数据绑定

    最典型用法 双向绑定 <input type="text" value="{{apple}}" ng-model="apple" &g ...

  3. AngularJS数据绑定中数据监控的机制说明

    from : http://docs.angularjs.org/guide/scope When the browser calls into JavaScript the code execute ...

  4. AngularJs数据绑定原理

    注 这篇博文主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据帮定是如何工作的人.如果你已经对Angular比较了解了,那强烈建议你直接去阅读源代码. Angular用户都想知道数据 ...

  5. AngularJs学习笔记2-控制器、数据绑定、作用域

    上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...

  6. angularjs——插值字符串

    一.何为插值字符串? 其实插值字符串的意思就是:拥有字符插值标记的字符串.如: hello,{{ to }}....字符插值标记:相当于我们平时在字符串替换中使用到的占位符.上面的例子中的{{to}} ...

  7. AngularJS 简介、指令、表达式

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...

  8. AngularJS快速入门指南04:指令

    AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...

  9. AngularJS学习笔记1

    简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...

  10. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

随机推荐

  1. HDU 5101 Select --离散化+树状数组

    题意:n 组,每组有一些值,求 在不同的两组中每组选一个使值的和大于k的方法数. 解法:n * Cnt[n] <= 1000*100 = 100000, 即最多10^5个人,所以枚举每个值x,求 ...

  2. Fix "Missing Scripts"

    一.Missing Scripts(脚本引用丢失) 请看下面的两张图的Warn(脚本引用丢失),在某些情况下我们会遇到这个警告. 二.解决办法 参考资料 http://unitygems.com/la ...

  3. vs2012无法启动已配置的开发Web服务器

    ] 有些教程说要开,我就没懂了

  4. maya获取邻接顶点的一个问题

    maya网格数据结构允许"非流形"的存在,于是,这种数据结构无法按顺序给出一个点的邻接顶点. 于是,MItMeshVertex::getConnectedVertices函数返回的 ...

  5. Apache Thrift

    Baidu Thrift  Google Thrift Apache Thrift - 可伸缩的跨语言服务开发框架

  6. win PPTP场景与搭建

    远程访问方案: 1,端口映射 2,vpn   实现这种远程访问的协议:pptp 等.     场景: 要从考试服务器[电信]下载题目. 单位有两个办事处,A双出口,B单网通出口. B要下载题,很慢. ...

  7. phpmailer 参数使用说明

    $AltBody--属性 出自:PHPMailer::$AltBody 文件:class.phpmailer.php 说明:该属性的设置是在邮件正文不支持HTML的备用显示 AddAddress--方 ...

  8. php基础04:字符串函数

    <?php //1.strlen(),strlen() 函数返回字符串的长度,以字符计. echo strlen("hello world"); echo "< ...

  9. 关于错误提示:此实现不是 Windows 平台 FIPS 验证的加密算法的一部分的解决方案

    vs上的一个项目,弄了一个aes加密算法.提示说:调用的目标异常.此实现不是 Windows 平台 FIPS 验证的加密算法的一部分.弄了好久一直不行.解决不了.最后找了半天资料终于解决了.估计下来. ...

  10. JS调试加断点

    js在回调函数执行时直接就跳过了,想看下回调函数也看不了,调试的debug代码一时半会儿想不起来,找了几分钟找到了,还是记一下好. 1 debugger;