理解理解Angular数据双向绑定数据双向绑定
AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：
MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
一一.什么是数据双向绑定什么是数据双向绑定
Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。
一个最简单的示例就是这样：
<div ng-controller="CounterCtrl">
<span ng-bind="counter"></span>
<button ng-click="counter++">increase</button>
</div>function CounterCtrl($scope) {
$scope.counter = 1;
}
这个例子很简单，每当点击一次按钮，界面上的数字就增加一。
二二.数据双向绑定原理数据双向绑定原理
1.深入理解深入理解
实现用户控制手机列表显示顺序的特性。动态排序可以这样实现，添加一个新的模型属性，把它和迭代器集成起来，然后让数
据绑定完成剩下的事情。
模板（app/index.html）
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
在index.html中做了如下更改：
首先，增加了一个叫做orderProp的<select>标签，这样用户就可以选择提供的两种排序方法。
然后，在filter过滤器后面添加一个orderBy过滤器用其来处理进入迭代器的数据。orderBy过滤器以一个数组作为输入，复制一
份副本，然后把副本重排序再输出到迭代器。
AngularJS在select元素和orderProp模型之间创建了一个双向绑定。而后，orderProp会被用作orderBy过滤器的输入。
什么时候数据模型发生了改变（比如用户在下拉菜单中选了不同的顺序），AngularJS的数据绑定会让视图自动更新。没有任
何笨拙的DOM操作。
资源评论
weixin_38706100
- 粉丝: 6
最新资源
- 集成 Apollo 配置中心实现数据库、MongoDB、Redis 动态切换及 MyBatis 与 Redis 缓存集成
- 轻量型文件数据采集抓取与日志信息汇总工具
- 使用DriveMonitor软件调试MM440变频器
- 使用starter调试MM440
- 基于Python语言的Spark数据处理分析案例集锦（PySpark）
- CCKS’2021 研究：SGSum- 面向体育赛事摘要的人工标注数据集介绍
- PHP与MySQL动态网站设计实战指南
- 基于 MapReduce 的大数据采集清洗处理及离线分析完整案例
- 《Rust并发编程：解锁高性能系统的密钥》，详细介绍Rust并发编程的基础知识及其在高性能系统开发中的应用
- 轻量型文件数据采集抓取及日志信息汇总工具
- 使用 YOLO 检测废弃行李 该项目旨在通过使用实时视频源和 YOLO（You Only Look Once）物体检测算法自动检测无人看管或遗弃的行李来提高公共交通安全
- 用户为中心的设计：系统设计师必读
- 大数据采集、清洗、处理：使用MapReduce进行离线数据分析完整案例
- 3089048582变压器测试仪 快速操作指南（第一版）.pdf
- HDFS 集群之间的数据相互交换方式
- easy prism - 安卓平台便捷好用的埋点数据收集中间件
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
