文档章节

AngularJs——双向数据绑定示例

孟飞阳
 孟飞阳
发布于 2016/12/11 09:18
字数 369
阅读 21
收藏 0
点赞 0
评论 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

共有 人打赏支持
孟飞阳
粉丝 202
博文 895
码字总数 531335
作品 5
朝阳
个人站长
JavaScript MVW 框架 - AngularJS

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

匿名 ⋅ 2011/01/20 ⋅ 44

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

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608 ⋅ 04/19 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

勿以 star 数论高低!React 在前端框架世界仍是领先地位

上周在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量。 通过使用一个叫做 Star History 的工具,我们可以...

局长 ⋅ 06/21 ⋅ 0

JavaScript 开发框架横向比对(Vue、React 和 Angular)

1 背景比对 MIT license 与 BSD-license 之间的区别是:MIT license 允许衍生软件加上我们自己的名字做推广,而 BSD license 不可以。 MVVM(Model-View-ViewModel):将其中的View 的状态和...

deniro ⋅ 05/30 ⋅ 0

AngularJS:跟随官方教程,一起构建一个简单的项目

AngularJS大白话简介: AngularJS是一个前端框架,和Bootstrap不同,他是一个为了构建 单页应用 而诞生的。Bootstrap是为了解决CSS样式和一些简单的互动(主要是提供了各种各样的样式,我们直...

那就远走 ⋅ 05/11 ⋅ 0

Angular 6 正式发布:统一框架、Material 和 CLI 三大模块

Angular 6.0.0 已正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material 和 CLI 三大 Angular 组件的第一个版本,此次没有将重点放在...

雨田桑 ⋅ 05/04 ⋅ 30

Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名 ⋅ 05/15 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 24分钟前 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 51分钟前 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 58分钟前 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

容器之查看minikue的environment——minikube的环境信息

执行如下命令 mjduan@mjduandeMacBook-Pro:~/Docker % minikube docker-envexport DOCKER_TLS_VERIFY="1"export DOCKER_HOST="tcp://192.168.99.100:2376"export DOCKER_CERT_PATH="/U......

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部