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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
详解AngularJS 模块化
Jun 14 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
一个ftp类(ini.php)
2006/10/09 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
老生常谈js-react组件生命周期
2017/05/02 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
个人生活学习自我评价范文
2013/11/26 职场文书
学术诚信承诺书
2014/05/26 职场文书
微笑服务标语
2014/06/24 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
Redis批量生成数据的实现
2022/06/05 Redis