<!DOCTYPE html>

<html ng-app="myApp1">
<body>
<div ng-controller="myCtrl1" class="container">
<h1>复习:双向数据绑定</h1>
<h2>方向1:Model=>View</h2>
<p>{{emp.age}}</p>
<p ng-bind="emp.age"></p>
<p>{{arr}}</p>
<ul>
<li ng-repeat="n in arr">{{n}}</li>
</ul>
<button ng-click="f1()" class="btn btn-warning">又过了一年</button>
</div>

<script src="js/angular.js"></script>
<script>
//model=>controller=>module
angular.module('myApp1', [])
.controller('myCtrl1', function($scope){
$scope.emp = {};
$scope.emp.age = 20;
$scope.arr = [];
//var f1 = function(){ console.log('f1....') }
$scope.f1 = function(){
$scope.emp.age++; //修改model数据
$scope.arr.push( Math.floor(Math.random()*100) );
}
})
</script>

</body>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css"/>
<title></title>
</head>
</html>

优悦集团(深圳)有限公司

悦享科技  乐享生活

微信:YOJOYGROUP

微博: http://weibo.com/YOJOYGROUP

官网:http://www.yojoygroup.com/

联系&投稿:service@yojoygroup.com

Angular解决双向数据绑定的更多相关文章

  1. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  2. angular的双向数据绑定

    方向1:模型数据(model) 绑定 到视图(view) 实现方法1:{{model变量名}} $scope.num=10 <p>{{num}}</p> 实现方法2: 常用指令 ...

  3. angularjs探秘<四> 双向数据绑定

    双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...

  4. 第217天:深入理解Angular双向数据绑定的原理

    一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...

  5. 双向数据绑定(angular,vue)

    最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...

  6. Angular双向数据绑定MVVM以及基本模式分析

    MVVM: angular的MVVM实现的是双向数据绑定,模型从服务器端抓取到数据,将数据通过控制器(controller)传递到视图(view)显示,视图数据发生变化时同样也会影响到模型数据的变化, ...

  7. Angular自定义组件实现数据双向数据绑定

    学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...

  8. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  9. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

随机推荐

  1. JTAG 学习 -SVF格式

    yxr注: 主要zt,附上自己的心得如下: 1)反观SVF文件,除了设置必要的条件之外(初始条件和TIR等四条命令),真正的运行命令就两条,SIR向JTAG TAP状态机的IR寄存器送命令,SDR往J ...

  2. C语言中两种方式表示时间日期值time_t和struct tm类型的相互转换

    使用gmtime函数或localtime函数将time_t类型的时间日期转换为structtm类型: 使用time函数返回的是一个long值,该值对用户的意义不大,一般不能根据其值确定具体的年.月.日 ...

  3. Android使用ViewPager做轮播

    ViewPager.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 ...

  4. spark优化

    spark.shuffle.consolidateFiles=false 默认是false,shuffle阶段不进行文件的合并,1000个map和1000个reduce将产生1000 000个文件. ...

  5. CentOS6.5上安装MySQL5.6

    1.准备数据存放的文件系统 新建一个逻辑卷,并将其挂载至特定目录即可.这里不再给出过程. 这里假设其逻辑卷的挂载目录为/data,而后需要创建/data/mysqldata目录做为mysql数据的存放 ...

  6. Linux系统yum命令安装软件时保留(下载)rpm包 -- 转载

    昨天在部署zabbix监控的时候,遇到一个问题:监控服务器处于无外网状态,在线安装不可用.而某些依赖包度娘或谷姐搜索起来也挺呛人的!于是想到一个办法,利用有外网的服务器的yum命令来安装这些软件,并自 ...

  7. 发现IE7的一个问题,不能用索引取字符串中的单个字符

    如下javascript: var testValue="hello,world"; alert(testValue[]); 在IE7上运行该代码,竟然提示值为"unde ...

  8. python爬虫:一些常用的爬虫技巧

    python爬虫:一些常用的爬虫技巧 1.基本抓取网页 get方法: post方法: 2.使用代理IP 在开发爬虫过程中经常会遇到IP被封掉的情况,这时就需要用到代理IP; 在urllib2包中有Pr ...

  9. Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像

    此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...

  10. mysql 行转列 和 列转行

    我们有时会将一些数据已逗号的连接方式存在数据库,当取出时我们又想单独一个个取出来 利用help_topic 的自增性 LENGTH(wu.`password`) - length(replace(wu ...