Angular——数据绑定
基本介绍
angularjs可以实现数据的双向绑定:(1)视图到模型的数据绑定,(2)模型到数据的绑定
基本使用
1、ng-model可以实现视图到模型的数据传输
2、{{name}}可以实现模型到视图的数据传输
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/angular.min.js"></script>
</head>
<body>
<div ng-controller="DemoController">
<input type="text" ng-model="msg">
<button ng-click="show()">点击</button>
<h1>{{msg}}</h1>
</div>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
$scope.name = 'wqx';
$scope.show = function () {
alert($scope.msg);
}
}]); //{{}}会闪烁,出现{{}},
// ng-cloak可以解决问题,原理在页面添加一个style样式,渲染的时候设置dispaly为none,到了加载绑定的数据
// 再将dispaly改为block
// <div ng-cloak>{{name}}</div>
// 注意必须将引入的angular放入头部 //要实现数据从视图到模型的绑定需要表单元素
//ng-model,可将$scope.msg的值进行更改 </script>
</body>
</html>
Angular——数据绑定的更多相关文章
- 简话Angular 01 初识Angular 数据绑定
1. Angular有哪些突出优点 1) MVC 基于Html-Javascript 2) 依赖注入 3) 数据双向绑定,响应式页面设计 4) 模块化,自定义指令 2. 简话数据绑定 1) 代码: & ...
- angular 数据绑定
1.ng-band 使用在index.html页面使用,该页面不要直接使用双花括号,否则网络延迟的时候页面会显示双花括号,由于通常只在index.html里导入angular.js,所以在其他模板页面 ...
- angular数据绑定---js全局学习
<!DOCTYPE html> <html ng-app> <head> <title>Simple app</title> </he ...
- Angular数据双向绑定
Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...
- [Angular Tutorial] 13 -REST and Custom Services
在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...
- angular、vue使用感受
最近开始学习并使用vue.js,并使用vue+node开发了一个移动端APP来练手,下面想聊聊我对于vue的粗浅看法,并将它和angular进行一些对比: 1.vue是一个轻量.高效的前端组件化框架, ...
- vue入门 vue与react和Angular的关系和区别
一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...
- vue和angular的区别:
相同: 1.数据绑定:vue和angular绑定都可以用{{}} 2.都支持内置指令和自定义指令 3.都支持内置过滤器和自定义过滤器. 区别: 1.学习成本和API 设计:vue相比于angular来 ...
- Angular 下的 directive (part 2)
ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现. 该指令可以应用于<body>元素,但首选使用多个ng ...
随机推荐
- [ZJOI2009]硬币游戏
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 920 Solved: 406[Submit][Status][Discuss] Descriptio ...
- ECMAScript 6 入门学习笔记(零)——开始
所有es6笔记都是我自己提出来的一些点,没有很详细的例子什么的,这个链接就是我看的教程,有需要的可以看看.(http://es6.ruanyifeng.com/#docs/intro) 1.ECMAS ...
- java中static学习总结
<<java编程思想>>: 1.static方法就是没有this的方法. 2.在static方法内部非静态方法. 3.在没有创建对象的前提下,可以通过类本身来调用static修 ...
- namenode启动成功,但是不能通过web访问50070问题
我在CentOS遇到这个问题,50070不行但8088可以,尝试了各种方法无法解决,各个进程全都启动,格式化namenode,各种配置正常均无法解决.后来觉得是默认访问端口没有生效,所以尝试添加端口配 ...
- Win7 系统管理员设置了系统策略_禁止进行此安装_怎么办
系统管理员设置了系统策略,禁止进行此安装,怎么办 最佳答案 尝试方法一: windows开始菜单,运行里面输入gpedit.msc打开组策略, 在"计算机配置"→管理模板→ ...
- android微信开放平台,申请移动应用的应用签名怎样获取
在微信开放平台,申请移动应用的时候: https://open.weixin.qq.com/cgi-bin/appcreate? t=manage/createMobile&type=app& ...
- 在Linux上配置DRBD部署
drbd 工作原理DRBD是一种块设备,能够被用于高可用(HA)之中.它相似于一个网络RAID-1功能.当你将数据写入本地 文件系统时,数据还将会被发送到网络中还有一台主机上.以同样的形式记录在一个文 ...
- NoSql的易扩展性
NoSql现在很火很时髦,大家言必称NoSql,仿佛关系型数据库已成陈旧落后的代名词. 但依我看,真正理解NoSql的还不多,在实际项目中用过的应该就更少了. 我也还不理解,更没怎么应用过,所以现在要 ...
- Android中静态变量的生命周期
静态变量的生命周期,起始于类的加载,终止于类的释放.什么时候类会加载呢?我们知道,在app打开时,会创建一个进程,然后初始化一个dvm的实例,负责类的加载释放 和 垃圾回收等.换句话说,在进程创建之后 ...
- influxdb入门——和mongodb一样可以动态增加字段
./influxd [--config yourconfigfile 2> /dev/null] 之所以重定向 因为默认log是stderr 再启动客户端./influx > CREAT ...