AngularJS学习之数据绑定
既然AngularJS是以数据作为驱动的MVC框架,在上一篇文章中,也介绍了AngularJS如何实现MVC模式的,所有模型里面的数据,都必须经过控制器,才能展示到视图中。
什么是数据绑定
首先来回忆一下MVC模式在AngularJS中的体现,我将会拿下面这张图片来说明。
一个模型中可能有多个数据,通过控制器,展示到视图的过程中,控制器要知道每一个数据,具体要放到视图中的哪个位置,所以,模型数据与视图位置的关联关系就是数据绑定。
单向绑定
AngularJS中的单向绑定指的是从模型数据到视图模板的单向过程。
具体实现是使用指令ng-bind
还有{{}}
。
而其中这两个方法的区别是使用{{}}
会出现闪烁现象,因为加载顺序的问题,浏览器刚开始加载不认识{{}}里面的数据,等过了一会,控制器加载出来之后,才识别到那个数据,所以会出现闪烁现象,解决闪烁现象的方法是使用指令ng-cloak
。
<ul ng-controller="DemoController">
<!--ng-bind将模型上的数据绑定到视图上-->
<li ng-bind="name"></li>
</ul>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var App = angular.module('App',[]);
App.controller('DemoController',['$scope',function($scope){
$scope.name = 'itcast';
}]);
</script>
双向绑定
AngularJS其中一个重要的特性就是双向数据绑定,实现的方法是通过为表单元素
使用ng-model
指令将试图模板上的值绑定到模型数据上,结合之前的单向绑定方法,实现数据的双向绑定,具体看一下例子
<ul ng-controller="DemoController">
<input type="text" ng-model="name"/>
<p>{{name}}</p>
</ul>
<script src="node_modules/angular/angular.min.js"></script>
<script>
var App = angular.module('App',[]);
App.controller('DemoController',['$scope',function($scope){
$scope.name = 'itcast';
}]);
</script>
此时打开浏览器,你在输入框中的任何变化,都会表现在
标签里面,这就是因为ng-model
将输入框中的值绑定到了模型数据里的name
属性上,实现了双向数据 绑定。
AngularJS学习之数据绑定的更多相关文章
- AngularJs学习——实现数据绑定的三种方式
三种方式: 方式一:<h5>{{msg}}</h5> 此方式在页面刷新的时候会闪现{{}} 方式二:<h5 ng-bind="msg">< ...
- AngularJs学习笔记-数据绑定、管道
数据绑定.管道 (1)数据绑定(Angular中默认是单向绑定) 1.[]方括号 可以用于子组件传值 由于是单向绑定,所以当子组件中的iStars属性发生改变时,不会影响到父组件中product.ra ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- 我的AngularJS 学习之旅
我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就 ...
- angularjs学习总结 详细教程(转载)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- AngularJs学习总结-了解基本特性(-)
现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...
- luluzero的angularJs学习之路_angularJs示例代码
最近开始自学 angularJs这个前端MVC框架,感觉在前端实现MVC很酷有木有.哈哈哈... 先说说我对前端MVC的一个基本的理解吧(刚开始学习接触得还比较浅显,理解可能会有些不到位,还请各位大神 ...
- [转载]angularjs学习总结 详细教程
http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
随机推荐
- ABAP术语-Update Key
Update Key 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/20/1114171.html Unique character str ...
- MySQL常用:Got a packet bigger than 'max_allowed_packet' bytes & MySQL开远程服务
1. 数据导入时出现错误 Got a packet bigger than 'max_allowed_packet' bytes 通过终端进入mysql控制台 mysql>show VARIAB ...
- Redis(一):NoSQL入门和概述
NoSQL入门和概述目录导航: NoSQL入门概述 3V+3高 当下的NoSQL经典应用 NoSQL数据模型简介 NoSQL数据库的四大分类 在分布式数据库中CAP原理CAP+BASE NoSQL 入 ...
- Redis底层数据类型
Redis主要数据结构:简单动态字符串(SDS).双端链表.字典.跳跃表.整数集合.压缩列表和快速列表: 一.简单动态字符串(SDS): Redis没有直接使用C语言中的传统的字节数组保存字符串,而是 ...
- [译]C语言实现一个简易的Hash table(6)
上一章中,我们实现了Hash表中的插入.搜索和删除接口,我们在初始化hash表时固定了大小为53,为了方便扩展,本章将介绍如何修改hash表的大小. 设置Hash表大小 现在,我们的hash表是固定大 ...
- Python3 urllib 爬取 花瓣网图片
点我去我的github上看源码 **花瓣网是动态的,所以要抓包分析,,但我真的累的不行,不想写教程了,我源码里有注释
- Python3 图像识别(二)
Infi-chu: http://www.cnblogs.com/Infi-chu/ 以图搜图的使用已经非常广泛了,我现在来介绍一下简单的以图搜图的相关算法及其实践. 一.感知hash算法 感知哈希算 ...
- (数据科学学习手札52)pandas中的ExcelWriter和ExcelFile
一.简介 pandas中的ExcelFile()和ExcelWriter(),是pandas中对excel表格文件进行读写相关操作非常方便快捷的类,尤其是在对含有多个sheet的excel文件进行操控 ...
- hash环/consistent hashing一致性哈希算法
一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CARP使用的 ...
- 20145226夏艺华 《Java程序设计》实验报告二
实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步骤 (一)单元测试 ...