Angular解决双向数据绑定
<!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
联系&投稿:service@yojoygroup.com
Angular解决双向数据绑定的更多相关文章
- Angular JS - 3 - Angular JS 双向数据绑定
一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...
- angular的双向数据绑定
方向1:模型数据(model) 绑定 到视图(view) 实现方法1:{{model变量名}} $scope.num=10 <p>{{num}}</p> 实现方法2: 常用指令 ...
- angularjs探秘<四> 双向数据绑定
双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...
- 第217天:深入理解Angular双向数据绑定的原理
一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...
- 双向数据绑定(angular,vue)
最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...
- Angular双向数据绑定MVVM以及基本模式分析
MVVM: angular的MVVM实现的是双向数据绑定,模型从服务器端抓取到数据,将数据通过控制器(controller)传递到视图(view)显示,视图数据发生变化时同样也会影响到模型数据的变化, ...
- Angular自定义组件实现数据双向数据绑定
学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- angular和vue双向数据绑定
angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...
随机推荐
- shell 脚本 exit 1 报错:numeric argument required问题解决
原因是在window环境编辑会有特殊字符,解决办法:sed -i'' "s/\r//" file_name
- Makefile <网络转载>
陈皓 (CSDN)概述——什 么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和 professional的 ...
- 【英语魔法俱乐部——读书笔记】 1 初级句型-简单句(Simple Sentences)
第一部分 1 初级句型-简单句(Simple Sentences):(1.1)基本句型&补语.(1.2)名词短语&冠词.(1.3)动词时态.(1.4)不定式短语.(1.5)动名词.(1 ...
- Android 在Canvas中实现画笔效果(一)--钢笔
如题: 公司要求做一个涂鸦板,要有钢笔.毛笔等画笔效果,网上搜了很多,可是效果不怎么好,决定自己研究下.废话不多说,进入正题. 首先,赛贝尔曲线弄明白了,在画曲线的过程中就是一条条的向量. 第二,曲线 ...
- 策划了个.NET控件的案例大赛
任何一个产品的普及,都有一个过程: 1. 对新事物充满热情.喜欢尝鲜.或后急迫需要的人首先成为产品用户.他们总数很少,但是是产品用户的第一批种子. 2. 思想比较开放.能接受新事物的人会成为第二批用户 ...
- C语言 值传递和地址传递
不少同学在学到C语言的指针部分时感到很困惑,对经常提到的"值传递"和"地址传递"两个概念弄不 明白.实际上,因为地址本身也可以作为一个特殊的"值&qu ...
- google map 计算地图面积方法
花了几个小时把js的google计算地图面积的算法改成了c# 的. class Program { static void Main(string[] args) { // a = new qq.ma ...
- 查看linux中某个端口是否被占用
1.netstat -tunlp | grep **** -t--tcp -u--udp -l--listening -n --numeric -p--program -a--all 2.lsof ...
- Python中字符串操作
#Python字符串操作 '''1.复制字符串''' #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sStr1 = 'strcpy2' pri ...
- 【POJ2482】Stars in Your Window(线段树,扫描线)
题意:在二维坐标系中有一些带权值的点,要求用一个长宽指定不能互换的框套住其中的一些,使得它们的权值和最大. n<=10000 x,y<=2^31 思路:首先按X排序,将Y坐标离散化,X坐标 ...