angularjs学习笔记之双向数据绑定


Posted in Javascript onSeptember 26, 2015

这次我们来详细讲解angular的双向数据绑定。

一.简单的例子

    这个例子我们在第一节已经展示过了,要看的移步这里

    这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容。这就实现了数据双向绑定。

二.取值表达式与ng-bind的使用

    我们再看一个例子,点击这里,文中出现的第一个例子中,{{greeting.text}}和{{text}}就是一个取值表达式了,但是如果你一直刷新页面,你会发现这样一个问题,那就是页面有时候会一瞬间的出现“{{greeting.text}} {{text}}”这个字符串,那我们该如何解决呢?

    这里就用到ng-bind命令了:用于绑定数据表达式。

    比如我们可以把

<p>{{greeting.text}} {{text}}</p>

    改为:

"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>";

这样改正之后,页面刷新就不会有不希望出现的字符串出现了。

但是使用命令总要比直接使用表达式的效率低一点,所以我们总结了一个常用规律:一般来说,index使用ng-bind,后续模版中的使用'{{}}'的形式。

三.双向绑定的典型场景-表单

先看一个form.html的内容:

<!doctype html>
<html ng-app="UserInfoModule">

<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
 <script src="js/angular-1.3.0.js"></script>
 <script src="Form.js"></script>
</head>

<body>
 <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="推荐使用126邮箱" 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="只能是数字、字母、下划线" 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()">重置表单</button>
       </div>
      </div>
     </form>
    </div>
   </div>
  </div>
 </div>
</body>

</html>

再看Form.js的内容:

var userInfoModule = angular.module('UserInfoModule', []);
 userInfoModule.controller('UserInfoCtrl', ['$scope',
  function($scope) {
   $scope.userInfo = {
    email: "253445528@qq.com",
    password: "253445528",
    autoLogin: true
   };
   $scope.getFormData = function() {
    console.log($scope.userInfo);
   };
   $scope.setFormData = function() {
    $scope.userInfo = {
     email: 'testtest@126.com',
     password: 'testtest',
     autoLogin: false
    }
   };
   $scope.resetForm = function() {
    $scope.userInfo = {
     email: "253445528@qq.com",
     password: "253445528",
     autoLogin: true
    };
   }
  }
 ])

实现效果截图如下:

上图实现的功能是:

1.点击”获取“,可以在控制台输出三个数据,邮箱、密码和选中状态(true、false)

2.点击“设置”:可以更改两个输入框的值和复选框取消选中的状态;

3.点击“重置”:可以让数据恢复到初始数据。

因为输入框中的ng-model和控制器中的数值实现了双向绑定,所以更改输入框的值或者更改控制器中的值,都会相应的更改双方的值。就这么几行代码,就实现了这么强大的功能,是不是觉得很神奇呢?确实很神奇,不过,更加神奇的还在后面呢!继续吧!

四.动态切换标签样式

先看color.html的内容:

<!doctype html>
<html ng-app="MyCSSModule">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="CSS1.css">
</head>
<style type="text/css">
  .text-red {
    background-color: #ff0000; 
  }
  .text-green {
    background-color: #00ff00;
  }
</style>

<body>
  <div ng-controller="CSSCtrl">
    <p class="text-{{color}}">测试CSS样式</p>
    <button class="btn btn-default" ng-click="setGreen()">绿色</button>
  </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="color.js"></script>

</html>

我们看第19行:有一个“color”的变量存在于这个p标签中,当点击“绿色”时,执行setGreen函数,改变“color”的值为“green”,所以更改了类名,从而也更改了背景颜色。使用这样的方法,让我们不用去直接操作元素,而是加一个变量就行了。代码简洁直观。

我们再看一下color.js的内容:

var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
  function($scope) {
    $scope.color = "red";
    $scope.setGreen = function() {
      $scope.color = "green";
    }
  }
])

属性“color”的默认值为“red”,所以显示红色,点击时执行函数,变为绿色。

Javascript 相关文章推荐
javascript offsetX与layerX区别
Mar 12 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 #Javascript
angularjs学习笔记之完整的项目结构
Sep 26 #Javascript
jQuery实现的登录浮动框效果代码
Sep 26 #Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 #Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 #Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 #Javascript
jQuery超简单选项卡完整实例
Sep 26 #Javascript
You might like
PHP eval函数使用介绍
2013/12/08 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
python如何修改装饰器中参数
2018/03/20 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
租车协议书范本2014
2014/11/17 职场文书
西安大雁塔导游词
2015/02/10 职场文书
放假通知格式
2015/04/14 职场文书
古诗之感恩老师
2019/10/24 职场文书
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers